单击边框颜色上的单选按钮答案

【问题标题】：radio buttons on click border color单击边框颜色上的单选按钮
【发布时间】：2016-10-14 17:45:48
【问题描述】：

我有两个单选按钮。通过单击一个单选按钮，它将为外部边框提供颜色。单击另一个单选按钮时，它将给出围绕图像的内边框。

   <!DOCTYPE html>
   <html>
      <head>
                 <script>src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">          </script>
      <style>
        .container1{
           float:left;
           width:33%;
           height:456px;
           display:inline-block;
        }
        #h{
           color:black;
           font-style:none;
        }
        .grid{
           padding:10px;
           width:93%;
           border:1px solid white;
           height:310px;
        }
        img{
           margin:5px;
        }
        .right1{
           padding-left:80px;
           display:inline-block;
           width:20%;
           height:300px;
           border:1px solid black;
        }
        #tele1{
           border:1px solid white;
        }
        #tele2{
           border:1px solid white;
        }
        #tele3{
           border:1px solid white;
        }
        #tele4{
           border:1px solid white;
        }
        #button1{
           width:100px;
           margin-top:40px;
        }
        #button2{
           width:100px;
           margin-top:20px;
        }
        .right2{
           float:right;
           width:30%;
           height:300px;
        }
     </style>
     <script>
     $(document).ready(function(){
        $("#kar1").click(function(){
           var thik=$("#kar1").attr('src');
           $("#tele1").attr('src',thik)
           $("#tele1").fadeToggle();

        });
        $("#kar2").click(function(){
           var thik1=$("#kar2").attr('src');
           $("#tele2").attr('src',thik1)
           $("#tele2").fadeToggle();
        });

        $("#kar3").click(function(){
           var thik2=$("#kar3").attr('src');
           $("#tele3").attr('src',thik2)
           $("#tele3").fadeToggle();

        });
        $("#kar4").click(function(){
           var thik3=$("#kar4").attr('src');
           $("#tele4").attr('src',thik3)
           $("#tele4").fadeToggle();
        });

        $("#list").change(function(){
           var selectedValue=$(this).val();
           $("#h").css("color",selectedValue);
        });
        $("#fonts").change(function(){
           var selecteValue=$(this).val();
           $("#h").css("font-size",selecteValue);
        });
        $('input[type="radio"]').click(function(){
           $("#h").css("font-style",$(this).val());
        });
        $("#img1").click(function(){
           $("#button1").click(function(){
              var lk=$(this).val();
              $(".grid").css("border-Color",lk);
           });
           $("#button2").click(function(){
              var k=$(this).val();
              $(".grid").css("border-Color",k);
           });
        });

        $("#grid1").click(function(){
           $("#button1").click(function(){
           var llk=$(this).val();
           $("img").css("border-Color",llk);
        });
        $("#button2").click(function(){
           var kl=$(this).val();
           $("img").css("border-Color",kl);
        });
     });
     });


     </script>
    </head>
    <body>
    <h3 id="h" >Album tittle</h3>
      <div class="container1">
     <div class="grid">
        <img id="tele1" src="original.jpg"width="45%"height="120px">
        <img id="tele2" src="original.jpg"width="45%"height="120px"> 
        <img id="tele3" src="original.jpg"width="45%"height="120px"> 
        <img id="tele4" src="original.jpg"width="45%"height="120px"> 
        </div>
       <div class="addimg">
        <img id="kar1" src="bike.jpg"width="20.2%"height="100px" >
        <img id="kar2" src="purple-curves-circles-   271580.jpg"width="22.4%"height="100px">
        <img id="kar3" src="fail.jpg"width="22.2%"height="100px">
        <img id="kar4" src="download.jpg"width="22.4%"height="100px">
        </div>
         </div>
        <div class="right1">
         <form id="my form">
        <input id="img1"  type="radio" name="bcolor"value="U">image 
        <input id="grid1" type="radio"   name="bcolor"value="B">grid
       </form>
       <br>
       <button id="button1" value="red"> red</button><br>
        <button id="button2" value="yellow" >yellow</button>
     <div class="right2">
     <P>
        Color  :
        <select id="list">
           <option value="red">red</option>
           <option value="blue">blue</option>
           <option value="#ff00ff">pink</option>
           <option value="#ff9900">orange</option>
           <option value="#0088cc">light blue</option>
        </select>
          </p>
        font-size: 
           <select id="fonts">
        <option value="1px">1
        <option>
        <option value="10px">10
        <option>
        <option value="20px">20
        <option>
        <option value="30px">30
        <option>
        <option value="40px">40
        <option>
        <option value="50px">50
        <option>
        <option value="60px">60
        <option>
     </select>
     <br><br>
     <input id="family1" type="radio"  name="k" value="italic">I
     <input  id="family1" type="radio"   name="k" value="normal">N
     <input  id="family1"type="radio"  name="k" value="Courier New">I
     </div>
      </body>
       </html>

当我单击第二个单选按钮时，我的代码不起作用，它也会改变外边框的颜色。第二个单选按钮应该只改变内边框的颜色。

【问题讨论】：

标签： jquery html css

【解决方案1】：

你的意思是ID为#img1和#grid1的单选按钮改变了类为.right1的div的颜色吗？

您的示例不是不言自明的。请详细说明。

P.S：底部的单选按钮具有相同的 id，这是不可能的。由于每个元素都应该有唯一的 ID，因此您必须为 name 属性提供一些通用值（如果它是 type=radio）。您可以尝试在此处提供class 而不是Id。

代码中的一些观察结果：如果您尝试使用元素 #img1 和 #grid1 更改某些元素的颜色，如下所示：

$("#img1").click(function(){
       $("#button1").click(function(){
          var lk=$(this).val();
          $(".grid").css("border-Color",lk);
       });
       $("#button2").click(function(){
          var k=$(this).val();
          $(".grid").css("border-Color",k);
       });
    });

    $("#grid1").click(function(){
       $("#button1").click(function(){
       var llk=$(this).val();
       $("img").css("border-Color",llk);
    });
    $("#button2").click(function(){
       var kl=$(this).val();
       $("img").css("border-Color",kl);
    });
 });

那么这将不会执行任何操作，因为在任何元素的 click 事件中给出$("#<button>").click(function(){...})，不会自动触发点击事件处理程序。您必须改用$("#<button>").trigger("click");。

请实施我建议的更改，并请重写您的代码并检查。休息一切似乎都很好。 :-)

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

【讨论】：