Javascript меняет стиль по щелчку мыши

Question

У меня есть небольшой скрипт jquery:

 $('.product_types > li').click(function() {
 $(this)
    .css('backgroundColor','#EE178C')
    .siblings()
    .css('backgroundColor','#ffffff');
   // $('.product_types > li').removeClass(backgroundColor);

});

, который раскрашивает меня в div.Проблема заключается в том, что я хочу, чтобы только последний элемент был выделен цветом.И я не знаю, могу ли я удалить стиль (стиль CSS) после каждого клика?

спасибо

Answer 1

Я хотел бы использовать класс css, например .lastClicked, и использовать jquery для удаления всех экземпляров .lastClicked при нажатии на новый элемент.

.lastClicked{ background-color:#EE178C; }
.lastClicked (siblingName) { background-color: #ffffff; }

ваш код jquery будет выглядеть примерно так:

$('.product_types > li').click(function() { 
  $(".lastClicked").removeClass("lastClicked");
  $(this).addClass("lastClicked");});

Answer 2

Вам нужна переменная, которая хранит фактический цветной div и удаляет стиль. Нечто подобное (не проверенное) должно сработать:

(function(){
var coloredDiv = null;

$('.product_types > li').click(function() {
    var item = $(this);
    if(coloredDiv != null) coloredDiv.removeClass('someCSSClassThatColorMyDiv');
    item.addClass('someCSSClassThatColorMyDiv');
    coloredDiv = item;
});

})();

Примечание: я также предлагаю использовать класс CSS вместо того, чтобы вручную устанавливать свойство CSS в Javascript. Это приводит к лучшему разделению логики кода и отображению.

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

Answer 3

Вы можете сохранить последний нажатый элемент в глобальной переменной, а при нажатии сбросить его цвет:

var lastElm = null
$('.product_types > li').click(function() {
  if( lastElm ) $(lastElm).css('backgroundColor','#[Your original color]')
  lastElm = this;
 $(this)
    .css('backgroundColor','#EE178C')
    .siblings()
    .css('backgroundColor','#ffffff');
   // $('.product_types > li').removeClass(backgroundColor);

});