jQuery / Javascript - 检测 WooCommerce 商店通知 html 是不是可见

Posted 2023-03-06

【中文标题】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

【参考方案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