Question

我正在寻找一种使用JavaScript / jQuery确定是否显示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加载后设置的？

Answer 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');
    }
});

Answer 2

检查

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

}

else{

}

Answer 3

您可以在这里找到所需内容：

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

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

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

3 个答案: