jQuery / Javascript - Detect if WooCommerce store notice html is visible

问题

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.

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

回答1:

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

回答2:

Check with

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

}

else{

}

回答3:

you can find what you are looking for here:

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

Btw => JQuery: if div is visible

来源：https://stackoverflow.com/questions/51840877/jquery-javascript-detect-if-woocommerce-store-notice-html-is-visible