on单击启用单击的图像并禁用其他图像

Question

我想用javascript onclick创建一个事件，它将启用单击的图像并禁用其他图像。

例如，如果我有6张图片，我如何做：我想点击任何图片，例如图片3，那么图片3将被启用，图片1、2、4、5、6将被禁用。

几秒钟后，我想点击1号图片，然后它会变得活跃，而2,3,4,5,6会被禁用。

我怎么能这么做？

Answer 1

您可以使用jQuery同级来完成此操作

这里有一个例子：

$(function(){
  $("img").click(function(){
    $(this).addClass("on").siblings("img").removeClass("on");
  });
});

编辑，工作示例：

null

$(function(){
  var replaceImg = function($img){ 
    var src0= $img.attr("src");
    var src1= $img.data("on-src");
    $img.attr("src",src1).data("on-src",src0);    
  };
  $("img").click(function(){   
    $(this).addClass("on");
    replaceImg($(this));
    
     $(this).siblings("img").each(
      
     function(){
       var $this = $(this);
        if($this.hasClass("on")){
          $(this).removeClass("on");
          replaceImg($(this));
          }
     }
     );
  });
});

css prettyprint-override">img{border:solid 3px black;}
img.on{border:solid 3px red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>



<div>
 <img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
 <img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
   <img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
   <img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
   <img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
</div>