Question

我有一个动态的图片缩略图列表。每次选择图像时，我想取消选择当前选择的图像并选择新单击的图像。 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）？谢谢！

Answer 1

你应该使用CSS类：

.selected { border: 5px solid gray;}

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

Answer 2

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

e.g。

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

Answer 3

按照您正在执行的方法：

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

由于jquery的.css()方法将属性添加到元素的内联style属性中，因此删除此样的其他img就足够了

<强> BUT

您最好使用类来定义所选元素，例如：

.selected {
    border: 5px solid gray;
}

然后：

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

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

3 个答案: