我有一个图像缩略图的动态列表。每次选择图像时,我都想取消选择当前选择的图像并选择新点击的图像。 html 如下所示:
<ul class="imgList">
<li>
<div id="item1" class="imgStyle" order="{#}" imgId="{imgId}">
<img src="{imgPath}"/>
</div>
</li>
<li>
<div id="item2" class="imgStyle" order="{#}" imgId="{imgId}">
<img src="{imgPath}"/>
</div>
</li>
<li>
<div id="itemn" class="imgStyle" order="{#}" imgId="{imgId}">
<img src="{imgPath}"/>
</div>
</li>
</ul>
我使用 jquery 在点击事件上绑定(bind)元素,如下所示:
$( ".imgStyle img").bind( "click", function() {
$(item1).css("border", "5px solid grey");
}
我可以轻松地选择/突出显示所点击的元素。但是如何取消选择先前突出显示的元素 (div)? 谢谢!
最佳答案
你应该使用 CSS 类:
.selected { border: 5px solid gray;}
$('.imgList').on('click','img', function() {
$(this).parents('.imgList').find('.selected').removeClass('selected').end().end().addClass('selected');
});
关于javascript - 突出显示和取消突出显示在 jquery 中选择的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25772610/