.css () не изменяется до второго клика - с помощью общего селектора класса

Question

Я использую лайтбокс, запускаемый многими элементами.Мне нужно изменить стиль (от светлого до темного), когда щелкает один уникальный элемент, поэтому я добавил идентификатор для этого элемента.Затем я навязываю CSS по умолчанию при каждом щелчке лайтбокса, но добавляю переопределение для #saved id.Я все еще учусь jquery.Предполагая, что мне может потребоваться выгрузить эту функцию первого клика.

В результате происходит нажатие на #saved, которое всегда игнорируется, однако во второй раз работает нормально.Даже щелчок от .lightbox к элементам #saved туда-сюда срабатывает правильно.Кроме того, если сначала щелкнуть элемент .lightbox, то #saved - #saved обедает с правильным css.В заключение, единственный раз, когда это не сработает при первом клике, это если #saved является первым элементом с классом .lightbox, по которому щелкают.

HTML:

Typical
<a href="/" class="lightbox">click me</a>

Unique
<a href="/" class="lightbox" id="saved">click me too</a>

JavaScript:

$(document).ready(function() {
var cssLB='.jquery-lightbox-mode-html .jquery-lightbox-background,.jquery-lightbox-loading,.jquery-lightbox-mode-html .jquery-lightbox-loading';

$('.lightbox').lightbox().click(function(){$(cssLB).css('background','#FFF url(/inc/img/loading.gif) no-repeat center center;')});

$('#saved').click(function(){
  $(cssLB).css('background','#000 url(/inc/img/loading-dark.gif)');
});

Answer 1

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

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

CSS

.typical{background: #FFF url(/inc/img/loading.gif) no-repeat center center;}
.unique{background: #000 url(/inc/img/loading-dark.gif);}

JQuery

$(document).ready(function() {
    var cssLB='.jquery-lightbox-mode-html .jquery-lightbox-background,.jquery-lightbox-loading,.jquery-lightbox-mode-html .jquery-lightbox-loading';

    $('.lightbox').lightbox().click(function(){
        if ( $(this).is('#saved') ){
            $(cssLB).removeClass('typical').addClass('unique');
        } else {
            $(cssLB).removeClass('unique').addClass('typical');
        }

    });
});

Кроме того, если у вас есть несколько элементов, которые saved, вам следует использовать класс вместо идентификатора, поскольку они должны быть уникальными ..

---

Обновление

Примечание : второй класс в вашей переменной cssLB включает третий класс. Таким образом, вы можете удалить третий .. (для производительности) .

CSS-приоритет : если для этих классов определено свойство background, вам придется увеличить специфичность классов typical и unique или применить !important декларация об их применении.

Использование !important

.typical{background: #FFF url(/inc/img/loading.gif) no-repeat center center!important;}
.unique{background: #000 url(/inc/img/loading-dark.gif)!important;}

Использование повышенной специфичности

.jquery-lightbox-mode-html .jquery-lightbox-background .typical,
.jquery-lightbox-loading .typical,
.jquery-lightbox-mode-html .jquery-lightbox-loading .typical {
    background: #FFF url(/inc/img/loading.gif) no-repeat center center;
}
.jquery-lightbox-mode-html .jquery-lightbox-background .unique,
.jquery-lightbox-loading .unique,
.jquery-lightbox-mode-html .jquery-lightbox-loading .unique{
    background: #000 url(/inc/img/loading-dark.gif);
}