jQuery/Javascript-检测WooCommerce商店通知html是否可见 [英] jQuery / Javascript - Detect if WooCommerce store notice html is visible

问题描述

我正在寻找一种使用JavaScript/jQuery确定是否显示WooCommerce商店通知的方法.商店通知的HTML看起来像这样...

I am looking for a way to determine with JavaScript / jQuery if the WooCommerce store notice is displayed. The HTML for the store notice looks like this...

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

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

I have tried to do this using the following...

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

但这告诉我通知即使在可见时也始终隐藏.

But this is telling me that the notice is hidden everytime, even when it is visible.

这与商店通知的显示方式有关吗?也许是在dom加载后设置的?

Could this be something to do with how the store notice get's displayed? Maybe it get's set after the dom has loaded?

推荐答案

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

The element is removed when the store notice is disabled. The CSS display property is not available hence undefined. Try the below code

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

这篇关于jQuery/Javascript-检测WooCommerce商店通知html是否可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！