在队列jQuery中添加添加/删除类点击图片

Add add/remove class click picture in queue jQuery

本文关键字：添加 队列 jQuery 删除      更新时间：2023-09-26

我有那些图片

<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

使用以下内容：

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

查看代码中的内联注释：

// 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
});

演示

或

如果图像不是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

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/
相关文章：