javascript - 奇怪的 Javascript/JQuery 条件语句行为

Question

我今天遇到了一个有趣的问题(Firefox 44)。我有一个条件语句，它在评估“true”if 语句后评估 else if 语句。举个例子:

.dataRow 的初始状态已折叠。当单击 dataRow 时，发现第一个条件为 true，并且该类更改为展开。接下来，将评估 else if 语句，并且该类将更改回折叠状态，因为它在之前的条件下更改为展开状态! 到底为什么要在第一个条件成立后评估 else if 语句？

    $("div").on("click", "div.dataRow", function(){
    if ($(this).hasClass("collapsed"))
    {
        $(this).removeClass("collapsed").addClass("expanded");
    }
    else if($(this).hasClass("expanded"))
    {
        $(this).removeClass("expanded").addClass("collapsed");   
    }
    });

我必须将 return 语句放入条件中才能使函数正常工作。

    $("div").on("click", "div.dataRow", function(){
    if ($(this).hasClass("collapsed"))
    {
        $(this).removeClass("collapsed").addClass("expanded");
                return false;
    }
    else if($(this).hasClass("expanded"))
    {
        $(this).removeClass("expanded").addClass("collapsed");   
                return false;
    }
    });

编辑

这是问题的简化再现 jsFiddle

Answer 1

我现在不喜欢jQuery的removeClass和addClass。但每个“else if” block 条件都会被评估。当您在第一个 block 中添加类时，第二个条件之后始终为 true。

如果你只有两个条件，我建议你只使用“else”。如果第一个 block 被执行，这将保护第二个 block 不被执行。