带按钮的控制单选按钮

Question

我使用单选按钮和CSS为每个产品功能构建了该颜色选择器。问题我无法解决如何使用JS远程选择单选按钮。

这里是颜色选择器变量产品风格的结构。

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> 

上市载我很努力工作，如何使它的功能，这样当用户点击按钮无线电和选择slider_content的按钮。

这显示了所选收音机上的一种可变产品风格。当您按下css键向左或向右移动与所选收音机输入相匹配的产品图像时。

任何人都可以建议如何按下时远程选择收音机？

每个单选按钮

Answer 1

添加传递给同样的功能，但具有不同值的onclick事件（每个无线电BTN） 什么你决定功能发生..

Answer 2

请检查这个例子。我为你做了这个。

希望这对你有帮助。谢谢。

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("button").removeAttr("checked"); 
 
     
 
    \t var element = $(this).attr('class'); 
 
     $("input").css("border","none"); 
 
     $("#" + element).attr('checked', 'checked'); 
 
     $("#" + element).css("border","2px solid #000"); 
 
     if(element){ 
 
     \t $(".slider__contents").hide(); 
 
      \t $(".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>