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

我有那些照片

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

---

我想添加该类。单击其中一个后显示边框，单击其他图片并将该类添加到此新图像后删除该类。JQuery

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

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

或

如果图像不是同级图像：

使用以下命令：

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

---

我会避免使用。兄弟姐妹。当一个简单的类选择器可以用来做同样的事情时，没有必要让jQuery迭代检查DOM树。第二个选项是走的路…下次你问一个问题，请考虑张贴相关的代码也。在这种情况下，您没有包含您尝试在jQuery中使用的代码。您可以接受答案。这对您有用吗？如果是这样的话，你应该标记一个答案，这样未来的访问者在寻找同一个问题的答案时可以知道哪个解决方案最适合你。。。

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

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/