jQuery: alter DIV that shares class with another DIV (but still owns a unique class also) only if some conditions were met

First of all I'm terribly sorry for the complicated subject but I don't know how to express my question shorter.

Say I have two buttons and two DIVs.

The first DIV has class class_1 and the second DIV has two classes: class_1 class_2.

The first button should only alter both class_1 and class_1 class_2 DIVs if the second button was previously clicked. Otherwise it should only alter class_1 DIV.

I see the solution in setting a variable and alter just one or both DIVs according to its value. But can't achieve the desired result, I'm afraid because my script can't affect a variable placed outside the function.

Here's my progress:

<style>
.class_1, .class_2, .on1, .on2 {
    border: 1px solid rgba(0,0,0,0.2); color: rgba(0,0,0,0.5);
    display: inline-block; height: 100px; width: 100px;
    text-align: center; line-height: 100px; margin: 0 4px 4px 0;
}
.on1, .on2 {cursor: pointer;}
</style>

<div>
    <div class="on1">Class 1 on</div> <div class="on2">Class 2 on</div>
</div>

<div>
    <div class="class_1">Class 1</div> <div class="class_1 class_2">Class 2</div>
</div>

<script>
var class_2_flag = "off";
jQuery(document).ready(function(){
        jQuery(".on2").click(function() {
            var class_2_flag = "on";
        });
        jQuery(".on1").click(function() {
            if (class_2_flag == "on") {
        jQuery(".class_1").css("background", "skyblue");
        jQuery(".class_1.class_2").css("background", "skyblue");
            }
        else {
            jQuery(".class_1").css("background", "steelblue");
            jQuery(".class_1.class_2").css("background", "skyblue");
        }
    });
});
</script>

And here's the fiddle: JSFiddle (updated and working properly thanks to @haxxxton's reply).

Seems that Class 2 on button can't access the class_2_flag variable, while setting it only inside its function. So I can't even check if I'm thinking in the right direction.

Answers 1

  • You're on the right track. However, on Line 4 of your JS code, you're redeclaring your class_2_flag variable by prefixing it with var, which is overriding your global declaration within the scope of the click event.

    If you are confident you want to stick with using a global (It is generally discouraged). Then you just need to remove the var prefix from Line 4.

    As you rightly pointed out, you can remove the var prefix from Line 1 too, however, for code clarity, and validation you should leave it.

    If i can make a recommendation, it would be to scope your class_2_flag within your document ready function, as it will remove it from the global scope, but still provide access to all the functions declared within. Something like this:

    jQuery(document).ready(function(){
        var class_2_flag = "off"; // us now inside the ready function scope
        jQuery(".on2").click(function() {
            class_2_flag = "on"; // we are also within the ready function scope, so do not prefix with `var`
        });
        jQuery(".on1").click(function() {
            if (class_2_flag == "on") {
                jQuery(".class_1").css("background", "skyblue");
                jQuery(".class_1.class_2").css("background", "skyblue");
            } else {
                jQuery(".class_1").css("background", "steelblue");
                jQuery(".class_1.class_2").css("background", "skyblue");
            }
        });
    });
    

Related Articles