突出显示和取消突出显示在 jquery 中选择的项目

Posted 2023-02-26

【中文标题】突出显示和取消突出显示在 jquery 中选择的项目

【英文标题】：highlight and un-highlight item selected in jquery

【发布时间】：2014-09-10 18:33:47

【问题描述】：

我有一个图片缩略图的动态列表。每次选择图像时，我都想取消选择当前选择的图像并选择新单击的图像。 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 来绑定点击事件上的项目，如下所示：

$( ".imgStyle img").bind( "click", function() 
    $(item1).css("border", "5px solid grey");

我可以轻松选择/突出显示单击的项目。但是如何取消选择先前突出显示的项目（div）？ 谢谢！

【参考方案1】：

你应该使用 CSS 类：

.selected  border: 5px solid gray;

$('.imgList').on('click','img', function() 
   $(this).parents('.imgList').find('.selected').removeClass('selected').end().end().addClass('selected');
);

【讨论】：

我以为我更快。但是由于您提供了相关的 css 样式，我会为您的回答 +1 =)

【参考方案2】：

我很少直接操作css样式，而是添加一个类，当它不再使用时，我就简单地删除这个类。

例如

$( ".imgStyle img").bind("click", function() 
    $(".imgStyle").removeClass("highlight");
    $(item1).addClass("highlight");

【讨论】：

感谢您提供更简单的解决方案！

【参考方案3】：

按照你已经在做的方法：

$( ".imgStyle img").bind( "click", function() 
    $( ".imgStyle img").removeAttr("style");
    $(item1).css("border", "5px solid grey");

由于jquery的.css()方法将属性添加到元素的内联style属性中，去掉everyother img的这种样式就足够了

但是

你最好使用一个类来定义一个被选中的元素，比如：

.selected 
    border: 5px solid gray;

然后：

$(".imgStyle img").bind("click", function() 
    $(".selected").removeClass("selected");
    $(this).addClass("selected");

【讨论】：

如果存在他不想删除的现有样式元素怎么办？

@JamesHill，我从The html looks like below: 得知情况并非如此......