Question

当激活叠加div时，如何让jQuery（文档）.ready（function（）再次触发？

我正在使用此功能隐藏a.button：

jQuery(function($) {
jQuery(document).ready(function() {
jQuery(
'.theme-actions a.button.button-primary.customize.load-customize.hide-if-no-customize'
).css("display","none");
});
});

具有相同类的相同按钮存在于名为.theme-wrap的“overlay”中，并且在.theme-wrap中，a.button CSS看起来像这样（差异为.active-theme）：

.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize

如果我重新加载打开.theme-wrap叠加层的页面，按钮就会消失，因为jQuery文档就绪函数会再次触发。

我尝试将两个CSS规则添加到一个函数

jQuery(
'.theme-actions a.button.button-primary.customize.load-customize.hide-if-no-customize,
.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
    ').css("display","none");

但它不起作用。

如何在叠加层打开时再次触发文档？

2014年10月14日更新

正如下面的答案中所指出的：在这种情况下不需要jQuery。我使用的CSS对于每个div都是相同的 - 原始和叠加 - 所以添加到管理样式表的简单{display:none}规则就足够了。

Answer 1

不要再使用$(document).ready()函数，而是尝试将CSS直接添加到样式表中。

Answer 2

激活叠加层后，运行以下命令：

jQuery('.theme-actions .active-theme a.button.button-primary.customize.load-customize.hide-if-no-customize
').css("display","none");

或者更好的是创建一个函数：

function hideElement( sel) {
    $( sel ).hide(); //.hide() is equiv to .css('display', 'none');
}

然后使用第一个选择器调用DOM ready处的函数：

$(document).ready(function() {
    hideElement( 'selector-1' );
});

然后当叠加层完全激活时，使用适当的选择器调用该函数：

hideElement( 'selector-2' );

当div打开时，再次触发jQuery（文档）.ready（function（）

2 个答案: