Compound if statement is being ignored in JQuery (Javascript)

Question

I am totally stumped on this. I am putting together a script that checks if two stylesheets are loaded into the head part of a WordPress theme, then load an internal stylesheet only if both external stylesheets are loaded first. But, the final if statement that checks if both external stylesheets "exist" runs as if there is no if statement wrapped around it. In the code, I mention the website where I got this idea from. Below is my code:

jQuery(document).ready(function() {
/* Place smaller widget design behind .widgettitle only on 3-column layout */
/* adapted from http://churchm.ag/dynamically-applying-stylesheets-using-jquery/ */
//templateDir is defined in functions.php and placed into this theme's head tag
var threeColExists = false;

    // check for blue stylesheet with 3-column stylesheets
    var blueExists = false;
    jQuery('link').each(function() {
        if(jQuery(this).attr('href') === 
        templateDir + '/layouts/3-column-right.css' ||
        templateDir + '/layouts/3-column-left.css' ||
        templateDir + '/layouts/3-column-right-magazine.css' ||
        templateDir + '/layouts/3-column-left-magazine.css') {
            threeColExists = true;
        }
        if(jQuery(this).attr('href') === templateDir + '/styles/blue.css') {
            blueExists = true;      
        }
    });

    // This is what is getting executed regardless of whether the two conditions below evaluate to true
    if((threeColExists === true) && (blueExists === true)) {
        jQuery('head').append('<style type="text/css"> .widgettitle { background: url(' + templateDir + '/images/widget-design-smaller-blue.png) bottom left no-repeat #FFFFFF; } </style>');   
    }
});

jfriend00 · Accepted Answer · 2012-01-25 07:14:47Z

2

You can't do a compound comparision the way you are doing it. It would have to be like this where you spell out each individual equality test:

if(jQuery(this).attr('href') === (templateDir + '/layouts/3-column-right.css') ||
    jQuery(this).attr('href') === (templateDir + '/layouts/3-column-left.css') ||
    jQuery(this).attr('href') === (templateDir + '/layouts/3-column-right-magazine.css') ||
    jQuery(this).attr('href') === (templateDir + '/layouts/3-column-left-magazine.css'))

or more efficiently without a jQuery object and without recreating the href value each time:

var href = this.href;
if (href === (templateDir + '/layouts/3-column-right.css') ||
    href === (templateDir + '/layouts/3-column-left.css') ||
    href === (templateDir + '/layouts/3-column-right-magazine.css') ||
    href === (templateDir + '/layouts/3-column-left-magazine.css'))

or perhaps even this would work to test them all with one regular expression:

if (this.href.match(new RegExp(templateDir + "/layouts/3-column-(right|left)(-magazine)?\\.css$")))

edited Jan 25, 2012 at 7:14

answered Jan 25, 2012 at 7:06

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason G. Over a year ago

I changed my code to use the second suggestion and it works! The only adjustments I had to make was to move the threeColExists variable next to each jQuery 'link' function (for some reason it wasn't working when the variables were declared elsewhere). Thank you very much.

Collectives™ on Stack Overflow

Compound if statement is being ignored in JQuery (Javascript)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related