jQuery/js 条件语句未通过

Question

第一个语句有效，但不是最后一个。无法解析。

第一次按下应该显示第一个隐藏的东西，然后第二次按下应该显示第三个隐藏的东西然后按钮应该自行删除。让我们找出语法错误（除非我真的搞砸了。）

$(document).ready(function() {
    $("#v2i").hide();
    $("#v3i").hide();
    $("#vAdd").click(function(){
        if ($("#v2i").not(":visible")) {
            $("#v2i").show();
        } else if ( ($("#v2i").is(":visible")) && ($("#v3i").not(":visible")) ) {
            $("#v3i").show();
            $(this).hide();
        }
    });
});

Answer 1

.not() 不是测试，它用于选择元素。你不需要使用not，因为jQuery有一个:hidden选择器，与:visible相反。你需要写：

    if ($("#v2i").is(":hidden")) {
        $("#v2i").show();
    } else if ( ($("#v2i").is(":visible")) && ($("#v3i").is(":hidden")) ) {
        $("#v3i").show();
        $(this).hide();
    }

另外，不需要在第二个 if 中检查 #v2i，因为您已经在第一个 if 中测试过它。如果 #v2i 可见，您将只能到达 else if。所以它应该只是：

    if ($("#v2i").is(":hidden")) {
        $("#v2i").show();
    } else if ($("#v3i").is(":hidden")) {
        $("#v3i").show();
        $(this).hide();
    }

Answer 2

一种不同的方法 - 而不是使用 if 语句 - 使用 class 名称，然后使用 querySelectorAll 删除隐藏的 class 并显示元素。

请注意，我创建了一个虚拟版本的元素，并在所有情况下都将 id 作为文本包含在内。实际上 - 所有发生的事情都是隐藏元素的顺序显示（首先是 v2i，然后是 v3i）所以它真的不需要 if 语句 - 而是将隐藏的 class 应用于每个元素然后点击按钮的顺序删除隐藏的 class （显示元素），然后当显示最后一个元素时，vAdd 按钮本身被隐藏。

如果逻辑和使用像这样的不同方法扩展边界并允许新想法，那么删除不必要的总是更好。是的，我知道那里有一个三元运算符，它是一个 shorthand if 语句 - 但我仍然喜欢这种方法。 :)

我知道解决方案已被接受 - 但我相信尝试新的方法来实现既定结果。

$(document).ready(function() {
    $("#vAdd").click(function(){
     var el = document.querySelectorAll('.hidden');
     el[0].classList.remove('hidden');
     el.length == 1 ? $(this).hide() : $(this).show();
    });
});

.hidden{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="v2i" class="hidden">v2i</div>
<div id="v3i" class="hidden">v3i</div>
<hr/>
<button id="vAdd">vAdd - click me</button>

jQuery/js 条件语句未通过

jQuery/js conditional statement not going through

javascript

jquery

conditional