выделить и выделить выделение в jquery

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

Следуя методу вы уже делаете:

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

Поскольку .css() метода Jquery добавляет свойство атрибута элемента инлайн style, убрав этот стиль everyother IMG должен быть достаточно

BUT

Лучше использовать класс для определения выбранного элемента, например:

.selected { 
    border: 5px solid gray; 
} 

И потом:

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

Answer 3

Я редко напрямую не манипулируют стиль CSS, а добавить класс и, когда он больше не используется, Я просто удаляю класс.

например.

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