Javascript jQuery在单击其他图像时删除图像的类

我创建了一个jQuery代码，用于在单击图像时插入边框

<div class="span2">

        <div class="text"> 
            <div class="pull-left ">
                <div id="opt" class="btn">
                    <img  class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>img1</p>
                </div>

                <div id="opt" class="btn">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>img2</p>
                </div>

                <div id="opt" class="btn">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>img3</p>
                </div>
            </div>
        </div>



        <div class="text"> 
            <div class="pull-left ">
                <div id="opt" class="btn">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>1</p>
                </div>

                <div id="opt" class="btn">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>2</p>
                </div>

                <div id="opt" class="btn">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>3</p>
                </div>
            </div>
        </div>
</div>

img1

img2

img3

一,

二,

三,

我需要在用户单击另一个图像后删除该边框

我的代码：

这应该可以：

$('.roller').on('click', function() {
    $('.roller').removeClass('highlight');
    $(this).addClass('highlight'); 
});

---

.roller

元素不是同级元素，因此必须执行一些DOM遍历以将它们作为目标

或者：

$（this.addClass（'highlight'）.parent（）.sibbins（）.find（'.roller'）.removeClass（'highlight'）

或

只需在将类添加到下一个图像之前删除它

$('.roller').on('click', function() {
    $('.roller').removeClass('highlight');
    $(this).addClass('highlight'); 
}); 

您可以委派事件并使用以下逻辑：

$('.span12').on('click', '.roller:not(.highlight)', function (e) {
    $(e.delegateTarget).find('.roller.highlight').add(this).toggleClass('highlight');
});


但公平地说，它应该只在CSS中完成：


.btn输入[name=opt]{
显示：无；
}
.滚筒{
边框：6px实心透明；
}
.btn输入[名称=选项]：选中+.roller{
边界半径：50%；
边框颜色：黑色；
-webkit过渡：边框颜色600ms；
/*狩猎*/
过渡：边框颜色600ms；
}
img{
宽度：120px；
高度：120px；
}

img1

img2

img3

一,

二,

三,

就这么简单

$('.roller').on('click', function() {
   $('.roller').removeClass('highlight').filter(this).addClass('highlight'); 
}); 

或者使用范围来加快速度：

$('.roller', '.span12').on('click', function() {
    $('.roller','.span12').removeClass('highlight').filter(this).addClass('highlight'); 
}); 

如果将其限制在“.text”类的范围内

$('.roller', '.span12').on('click', function() { 
    $('.roller',$(this).parents('.text')).removeClass('highlight').filter(this).addClass('highlight'); 
});

有很多方法可以做到这一点，伙计们，你们能告诉我什么是正确的方法吗？我指的是jquery的良好实践。谢谢。我没有看到这样的要求，你在问题中从哪里看到的？好的，我会添加一个代码，作为一个新的sampleNice方法，upvote。你能向请求帮助的用户解释一下吗？
$('.roller', '.span12').on('click', function() {
    $('.roller','.span12').removeClass('highlight').filter(this).addClass('highlight'); 
}); 

$('.roller', '.span12').on('click', function() { 
    $('.roller',$(this).parents('.text')).removeClass('highlight').filter(this).addClass('highlight'); 
});