JQuery:Alter Div与另一个Div共享类别(但仍然拥有独特的类)，只有在满足某些条件时

Question

首先，我为复杂的主题感到非常抱歉，但我不知道如何缩短我的问题。

说我有两个按钮和两个divs。

第一个Div具有class_1类，第二个Div有两个类：class_1 class_2。

如果先前单击第二个按钮，那么第一个按钮应仅更改class_1和class_1 class_2 DIV。否则，它只能改变 class_1div。

我看到了设置变量的解决方案，并根据其值仅更改一个或两个Div。但是无法实现所需的结果，恐怕我的脚本无法影响函数之外放置的变量。

这是我的进度：

<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>

这是小提琴：JSFIDDLE （ @ haxxxton 的答复，更新并正常工作，。。

似乎按钮上的2类在仅在其函数中设置时无法访问class_2_flag变量。因此，我什至无法检查我是否朝正确的方向思考。

Answer 1

您在正确的轨道上。但是，在JS代码的Line 4上，您是通过将其重新列出class_2_flag变量来重新安装var，该变量将CC_9在单击事件的范围内覆盖您的全局声明。

。

如果您有信心坚持使用全局（通常是劝阻它）。然后，您只需要从Line 4删除var前缀。

正如您正确指出的那样，您也可以从 Line 1中删除var前缀

如果我可以提出建议，则将在中范围范围范围范围范围删除，因为它将从全局范围中删除它，但仍然可以访问对内部声明的所有功能的访问。这样的东西：

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