添加add/removeclass点击队列中的图片jQuery

Question

我有那些照片

<img src=img1.jpg class=pic />
<img src=img2.jpg class=pic />
<img src=img3.jpg class=pic />
<img src=img4.jpg class=pic />
<img src=img5.jpg class=pic />
<img src=img6.jpg class=pic />

.ShowBorderRed{border:3px solid red;}

我想添加 class .ShowBorderRed 单击其中一张并删除此 class 单击另一张图片并将 class 添加到此新图片图片。 JQuery

Answer 1

查看代码内嵌的注释：

// bind click event on all the images having pic class
$('img.pic').on('click', function() {
    $(this).addClass('ShowBorderRed') // Add class to the clicked image
        .siblings().removeClass('ShowBorderRed'); // Remove class from other sibling images
});

DEMO

或

如果图片不是siblings:

var $images = $('img.pic');
$images.on('click', function() {
    $images.removeClass('ShowBorderRed'); // Remove class from all other images
    $(this).addClass('ShowBorderRed'); // Add class to the clicked image
});

DEMO

Answer 2

使用以下内容：

$(document).ready(function(){
    var $img = $('.pic');
    $img.click(function(event){
        $img.removeClass('ShowBorderRed');
        $(this).addClass('ShowBorderRed');
    });
});

Answer 3

Use the following code:

$(document).ready(function(){
    var $img = $('.pic');
    $img.click(function(event){
        $img.removeClass('ShowBorderRed');
        $(this).addClass('ShowBorderRed');
    });
});
refer the below mentioned link.
http://jsfiddle.net/2QyY3/199/

添加add/removeclass点击队列中的图片jQuery

Add add/remove class click picture in queue jQuery

javascript

jquery

addclass

onclick

gallery