.css()直到第二次单击才会更改-使用共享类选择器
.css()直到第二次单击才会更改-使用共享类选择器
提问于 2011-12-29 23:28:47
我使用的是一个由许多元素触发的lightbox。当一个独特的元素被点击时，我需要改变样式(浅到深)，所以我给那个元素添加了一个id。然后，我在每次点击lightbox时强制使用css默认值，但在#saved id上添加了一个覆盖。我还在学习jquery。假设我可能需要卸载第一个单击函数。
发生的情况是，如果#saved被点击，它总是被忽略，但它在第二次前进时工作得很好。即使在.lightbox和#saved elements之间来回点击也会正确触发。另外，如果首先单击了.lightbox元素，那么#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)');
});回答 1
Stack Overflow用户
回答已采纳
发布于 2011-12-29 23:40:44
为了避免无法确定调用事件处理程序的顺序的情况，您应该执行单个绑定并确定从那里开始的最佳路由。
此外，您应该使用类，而不是手动更改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，因为它们应该是唯一的。
更新
A注意：cssLB变量中的第二个类包含第三个类。所以你可能想去掉第三个..(用于性能)。
CSS property ：如果这些类定义了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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8669724
复制相关文章
相似问题
腾讯云开发者
