用按钮控制单选按钮

Question

I built this color picker for each product feature using radio buttons and CSS. The problem I could not work out how to remotely select radio button using JS.

Here is the structure for Color picker variable product style.

 h1 { display:block; text-align: center;} *, *:before, *:after { box-sizing: border-box; } #colorPicker { width:400px; margin:0 auto; height:520px; border:1px solid #eaeaea; } .slider { height: 100%; width:100%; position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .slider__nav { width: 30px; height: 30px; margin: 2rem 5px; z-index: 10; border:1px solid #BBB; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slider__nav:checked { -webkit-animation: check 0.4s linear forwards; animation: check 0.4s linear forwards; } .slider__nav:checked:nth-of-type(1) ~ .slider__inner { left: 0%; } .slider__nav:checked:nth-of-type(2) ~ .slider__inner { left: -100%; } .slider__nav:checked:nth-of-type(3) ~ .slider__inner { left: -200%; } .slider__nav:checked:nth-of-type(4) ~ .slider__inner { left: -300%; } .slider__nav:checked:nth-of-type(5) ~ .slider__inner { left: -400%; } .slider__nav:checked:nth-of-type(6) ~ .slider__inner { left: -500%; } .slider__nav:checked:nth-of-type(7) ~ .slider__inner { left: -600%; } .slider__nav:checked:nth-of-type(8) ~ .slider__inner { left: -700%; } .slider__nav:checked:nth-of-type(9) ~ .slider__inner { left: -800%; } .slider__nav:checked:nth-of-type(10) ~ .slider__inner { left: -900%; } .slider__nav:checked:nth-of-type(11) ~ .slider__inner { left: -1000%; } .slider__inner { position: absolute; top: 0; left: 0; width: 1100%; height: 100%; -webkit-transition: left 0.4s; transition: left 0.4s; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .slider__contents { height: 100%; padding: 2rem; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @-webkit-keyframes check { 50% { outline-color: #333; box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2); } 100% { outline-color: #333; box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0); } } @keyframes check { 50% { outline-color: #333; box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2); } 100% { outline-color: #333; box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0); } } 

 <div class="listing"> <button onclick="white">White Glass Cooler"> <button onclick="black">Black Glass Cooler"> <button onclick="purple">Purple Glass Cooler"> <button onclick="blue">Blue Glass Cooler"> </div> <div id="colorPicker"> <div class="slider"> <input id="white" style="background:white;" type="radio" name="slider" title="White" checked="checked" class="slider__nav"/> <input id="blue" style="background:blue;" type="radio" name="slider" title="Blue" class="slider__nav"/> <input id="gold" style="background:gold;" type="radio" name="slider" title="Gold" class="slider__nav"/> <input id="green" style="background:green;" type="radio" name="slider" title="Green" class="slider__nav"/> <input id="grey" style="background:grey;" type="radio" name="slider" title="Grey" class="slider__nav"/> <input id="darkgreen" style="background:darkgreen;" type="radio" name="slider" title="Jade" class="slider__nav"/> <input id="darkred" style="background:darkred;" type="radio" name="slider" title="Maroon" class="slider__nav"/> <input id="orange" style="background:orange;" type="radio" name="slider" title="Orange" class="slider__nav"/> <input id="pink" style="background:pink;" type="radio" name="slider" title="Pink" class="slider__nav"/> <input id="red" style="background:red;" type="radio" name="slider" title="Red" class="slider__nav"/> <input id="yellow" style="background:yellow;" type="radio" name="slider" title="Yellow" class="slider__nav"/> <div class="slider__inner"> <div class="slider__contents"><img src="img/cooler-black.jpg"></div> <div class="slider__contents"><img src="img/cooler-blue.jpg"></div> <div class="slider__contents"><img src="img/cooler-gold.png"></div> <div class="slider__contents"><img src="img/cooler-green.jpg"></div> <div class="slider__contents"><img src="img/cooler-grey.png"></div> <div class="slider__contents"><img src="img/cooler-jade.png"></div> <div class="slider__contents"><img src="img/cooler-maroon.jpg"></div> <div class="slider__contents"><img src="img/cooler-orange.jpg"></div> <div class="slider__contents"><img src="img/cooler-pink.jpg"></div> <div class="slider__contents"><img src="img/cooler-red.jpg"></div> <div class="slider__contents"><img src="img/cooler-yellow.jpg"></div> </div> </div> </div> 

<div class="listing">
<button onclick="white">White Glass Cooler">
<button onclick="black">Black Glass Cooler">
<button onclick="purple">Purple  Glass Cooler">
<button onclick="blue">Blue Glass Cooler">
</div>

The listing contained the buttons which I am struggling to work out how to make it functional so that when the user click the button both radio and slider_content is selected.

This show one variable product style on selected radio. When you press it the css to move left or right the product image that match the selected radio input.

Can anyone suggest how to remotely select radio when pressed?

Answer 1

在每个单选按钮上添加一个onclick事件，该事件传递给相同的函数，但具有不同的值（对于每个单选btn），您所决定的函数将发生什么。

Answer 2

Please check this example. I have made this for you.

Hope this will helpful for you. Thanks.

 $(document).ready(function(){ $("button").click(function(){ $("button").removeAttr("checked"); var element = $(this).attr('class'); $("input").css("border","none"); $("#" + element).attr('checked', 'checked'); $("#" + element).css("border","2px solid #000"); if(element){ $(".slider__contents").hide(); $(".slider__contents."+ element).show(); $(".slider__contents."+ element).css("background",element); } }); }); 

 h1 { display:block; text-align: center;} *, *:before, *:after { box-sizing: border-box; } #colorPicker { width:400px; margin:0 auto; height:520px; border:1px solid #eaeaea; } .slider { height: 100%; width:100%; position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .slider__nav { width: 30px; height: 30px; margin: 2rem 5px; z-index: 10; border:1px solid #BBB; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .slider__nav:checked { -webkit-animation: check 0.4s linear forwards; animation: check 0.4s linear forwards; } .slider__nav:checked:nth-of-type(1) ~ .slider__inner { left: 0%; } .slider__nav:checked:nth-of-type(2) ~ .slider__inner { left: -100%; } .slider__nav:checked:nth-of-type(3) ~ .slider__inner { left: -200%; } .slider__nav:checked:nth-of-type(4) ~ .slider__inner { left: -300%; } .slider__nav:checked:nth-of-type(5) ~ .slider__inner { left: -400%; } .slider__nav:checked:nth-of-type(6) ~ .slider__inner { left: -500%; } .slider__nav:checked:nth-of-type(7) ~ .slider__inner { left: -600%; } .slider__nav:checked:nth-of-type(8) ~ .slider__inner { left: -700%; } .slider__nav:checked:nth-of-type(9) ~ .slider__inner { left: -800%; } .slider__nav:checked:nth-of-type(10) ~ .slider__inner { left: -900%; } .slider__nav:checked:nth-of-type(11) ~ .slider__inner { left: -1000%; } .slider__inner { position: absolute; top: 0; left: 0; width: 1100%; height: 100%; -webkit-transition: left 0.4s; transition: left 0.4s; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .slider__contents { height: 100%; padding: 2rem; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @-webkit-keyframes check { 50% { outline-color: #333; box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2); } 100% { outline-color: #333; box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0); } } @keyframes check { 50% { outline-color: #333; box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2); } 100% { outline-color: #333; box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0); } } 

 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div class="listing"> <button class="white" onclick="white">White Glass Cooler"> <button class="black" onclick="black">Black Glass Cooler"> <button class="purple" onclick="purple">Purple Glass Cooler"> <button class="blue" onclick="blue">Blue Glass Cooler"> </div> <div id="colorPicker"> <div class="slider"> <input id="white" style="background:white;" type="radio" name="slider" title="White" checked="checked" class="slider__nav"/> <input id="blue" style="background:blue;" type="radio" name="slider" title="Blue" class="slider__nav"/> <input id="gold" style="background:gold;" type="radio" name="slider" title="Gold" class="slider__nav"/> <input id="green" style="background:green;" type="radio" name="slider" title="Green" class="slider__nav"/> <input id="grey" style="background:grey;" type="radio" name="slider" title="Grey" class="slider__nav"/> <input id="darkgreen" style="background:darkgreen;" type="radio" name="slider" title="Jade" class="slider__nav"/> <input id="darkred" style="background:darkred;" type="radio" name="slider" title="Maroon" class="slider__nav"/> <input id="orange" style="background:orange;" type="radio" name="slider" title="Orange" class="slider__nav"/> <input id="pink" style="background:pink;" type="radio" name="slider" title="Pink" class="slider__nav"/> <input id="red" style="background:red;" type="radio" name="slider" title="Red" class="slider__nav"/> <input id="yellow" style="background:yellow;" type="radio" name="slider" title="Yellow" class="slider__nav"/> <div class="slider__inner"> <div class="slider__contents black"><img src="img/cooler-black.jpg"></div> <div class="slider__contents blue"><img src="img/cooler-blue.jpg"></div> <div class="slider__contents gold"><img src="img/cooler-gold.png"></div> <div class="slider__contents green"><img src="img/cooler-green.jpg"></div> <div class="slider__contents grey"><img src="img/cooler-grey.png"></div> <div class="slider__contents jade"><img src="img/cooler-jade.png"></div> <div class="slider__contents maroon"><img src="img/cooler-maroon.jpg"></div> <div class="slider__contents orange"><img src="img/cooler-orange.jpg"></div> <div class="slider__contents pink"><img src="img/cooler-pink.jpg"></div> <div class="slider__contents red"><img src="img/cooler-red.jpg"></div> <div class="slider__contents yellow"><img src="img/cooler-yellow.jpg"></div> </div> </div> </div> </body> </html>