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

此外，由于您已在第一个#v2i中对其进行了测试，因此无需在第二个if中检查if。如果else if可见，您只能访问#v2i。所以它应该是：

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

Answer 2

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

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

如果逻辑和使用这样的不同方法扩展边界并允许新想法，那么总是更好地消除不可取之处。是的，我知道那里有三元运算符，这是一个简写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条件语句没有通过

2 个答案: