javascript - 用按钮控制单选按钮

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>

该列表包含我正在努力弄清楚如何使其发挥作用的按钮，以便当用户单击按钮时 radio 和 slider_content 都会被选中。

这显示了所选 radio 上的一种可变产品样式。当您按下它时，CSS 会向左或向右移动与所选 radio 输入相匹配的产品图像。

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

Answer 1

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