jQuery / Javascript - 检测 WooCommerce 商店通知 html 是否可见答案

【问题标题】：jQuery / Javascript - Detect if WooCommerce store notice html is visiblejQuery / Javascript - 检测 WooCommerce 商店通知 html 是否可见
【发布时间】：2019-01-21 06:41:21
【问题描述】：

我正在寻找一种方法来确定是否显示 WooCommerce 商店通知。商店通知的 HTML 如下所示...

<p class="woocommerce-store-notice demo_store" style="display: block;">
    This is a store notice
</p>

我尝试使用以下方法来做到这一点...

jQuery(document).ready(function(){
    if ( jQuery('.woocommerce-store-notice').css('display') == 'none') {
        console.log('Store Notice Hidden');
    } else {
        console.log('Store Notice Visible');
    }
});

但这告诉我，通知每次都是隐藏的，即使它是可见的。

这可能与商店通知的显示方式有关吗？也许它在 dom 加载后被设置？

【问题讨论】：

好吧，什么时候或在什么情况下会显示这个通知？
我在jsfiddle 上试过，效果很好。可能问题出在 jquery 脚本在代码中的位置。
通知显示在页面加载时，但它的显示值似乎是使用 Javascript 内联设置的。将尝试找出现在设置的位置
这就是关键。找出它何时显示，您可以使用该事件。但是您可以尝试使用window.on('load') 而不是ready

标签： javascript jquery css wordpress woocommerce

【解决方案1】：

当商店通知被禁用时，该元素被删除。 CSS display 属性不可用，因此 undefined。试试下面的代码

jQuery(document).ready(function(){
    if ( jQuery('.woocommerce-store-notice').css('display') == undefined) {
        console.log('Store Notice Hidden');
    } else {
        console.log('Store Notice Visible');
    }
});

【讨论】：

欢迎回来 :)
@LoicTheAztec 你还记得我真是太疯狂了 :) 顺便说一句，你正在研究 woocommerce 主题

【解决方案2】：

检查

if(jQuery('.woocommerce-store-notice').is(':visible')){

}

else{

}

【讨论】：

【解决方案3】：

你可以在这里找到你要找的东西：

http://api.jquery.com/visible-selector/

顺便说一句 => JQuery: if div is visible

【讨论】：