用按钮控制单选按钮

【问题标题】：Control radio button with button用按钮控制单选按钮
【发布时间】：2018-02-06 18:29:06
【问题描述】：

我使用单选按钮和 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 都会被选中。

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

谁能建议如何在按下时远程选择收音机？

【问题讨论】：

    标签： javascript html css


    【解决方案1】：

    请检查此示例。这是我为你做的。

    希望这对您有所帮助。谢谢。

    $(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>

    【讨论】：

    • 该功能有效，但如果用户单击单选按钮而不是列表下方的按钮，它会取消单选按钮。此外，当按下按钮时，我希望选择单选按钮并且图像显示由 CSS 控制，而不是由脚本用背景颜色遮盖。
    【解决方案2】：

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

    【讨论】：

      猜你喜欢
      • 2017-06-11
      • 1970-01-01
      • 2013-02-28
      • 2015-08-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode