使用按钮

Question

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

这是Color picker变量产品样式的结构。

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>

列表包含按钮，我正在努力弄清楚如何使其正常工作，以便当用户点击按钮时，选择了radio和slider_content。

这会在所选收音机上显示一个可变的产品样式。当您按下css时，向左或向右移动与所选无线电输入匹配的产品图像。

有人可以建议在按下时如何远程选择收音机吗？

Answer 1

在每个单选按钮上添加一个onclick事件，传递给相同的函数但具有不同的值（对于每个单选按钮） 你决定的功能会发生什么..

Answer 2

请查看此示例。我已经为你做了这件事。

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

＆＃13;

＆＃13;

$(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);
        }
    });
});

＆＃13;

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);
          }
        }

＆＃13;

<!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>

＆＃13;

＆＃13;

＆＃13;