onclick 启用被点击的图像并禁用其他图像

Question

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

比如我有6张图片，我该怎么办：我想点击任意一张图片，比如3号图片，那么3号图片就会被启用，1,2,4,5号图片,6 将被禁用。

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

我该怎么做？

Answer 1

举个例子：

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

编辑，工作示例：

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

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>

编辑 2 - 用于更改图像

onclick 启用被点击的图像并禁用其他图像

Onclick enable the clicked image and disable the others images

html

javascript

jquery

onclick

jquery-events