Question

我正在使用由许多元素触发的灯箱。当点击一个唯一元素时，我需要改变样式（从浅到深），所以我在该元素中添加了一个id。然后我在每次点击灯箱时强制使用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元素，那么你应该使用一个类而不是一个id，因为它们应该是唯一的。

<强>更新

注释： cssLB变量中的第二个类包含第三个类。所以你可能想删除第三个..（性能）。

CSS优先级：如果这些类定义了background属性，那么您必须typical和unique类increase the specificity或应用!important declaration来强制执行。

使用!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);
}

.css（）直到第二次单击才更改 - 使用共享类选择器

1 个答案: