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

Question

I have a dynamic list of image thumbnails. Every time an image is selected I want to unselect the currently selected image and select the newly clicked image. The html looks like below:

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

And I use jquery to bind the items on click event like this:

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

I'm easily able to select/highlight the item clicked. But how do I unselect the previously highlighted item (div)? Thanks!

Answer 1

You should use CSS classes :

.selected { border: 5px solid gray;}

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

Answer 2

I seldom directly manipulate the css style, but rather add a class and when it is no longer in use, I simply remove the class.

eg

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

Answer 3

Following the method you are already doing:

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

Since the jquery's .css() method adds the property to the inline style attribute of the element, removing this style of everyother img should be enough

BUT

You'd better use a class to define a selected element, like:

.selected {
    border: 5px solid gray;
}

And then:

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