在队列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;}

我想在我点击其中一个后添加类.ShowBorderRed，一旦我点击另一张图片并将该类添加到这个新图像中，就删除该类。 JQuery

Answer 1

使用以下内容：

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

Answer 2

请参阅代码中的内联注释：

// 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 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/