以更好的方式编写代码？ 使用排列显示/隐藏 div？

Question

基本上我想根据哪些 div 已经可见来显示特定的 div。 为了更容易理解：div 1,2 代表“刻度”，div 4,5 代表“十字”，div 3 代表“正确答案”。 因此，如果 div 1 和 2 可见，我想隐藏包括 1,2 在内的所有其他 div，但显示 div 3。同样，如果 div 2,1 可见，则应隐藏所有其他 div，包括 1,2，但 div 3 应该可见。
所以，我意识到我在显示 div 3 之前实际上是在检查 div [1,2] 的排列。这是以下行为，它有效：

function checkAnswer(){
    if($("#div1").is(":visible")) {
        if($("#div2").is(":visible")){
            $("#div1, #div2, #div4, #div5").hide();
            $("#div3").show();
        }
    }
    if($("#div2").is(":visible")){
        if($("#div1").is(":visible")){
            $("#div1, #div2, #div4, #div5").hide();
            $("#div3").show();
        }
    }
    if($("#div3").is(":visible")){
            $("#div1, #div2, #div4, #div5").hide();
    }
}    

但是，如果我有一个必须检查 4 个 div 的场景，那么继续以这种方式编写它就变成了一项艰巨的任务。 例如：

    function checkAnswer2(){
        if($("#div6").is(":visible")) {
            if($("#div7").is(":visible")){
                if($("#div9").is(":visible")){
                    if($("#div10").is(":visible")){
                        $("#div6, #div7, #div9, #div10, #div11").hide();
                        $("#div8").show();
                    }
                }
            }

        }
        if($("#div6").is(":visible")) {
            if($("#div7").is(":visible")){
                if($("#div10").is(":visible")){
                    if($("#div9").is(":visible")){
                        $("#div6, #div7, #div9, #div10, #div11").hide();
                        $("#div8").show();
                    }
                }
            }
        }

//going uptil....
if($("#div8").is(":visible")){
            $("#div6, #div7, #div9, #div10, #div11").hide();
    }

} 

显然我没有在这里提到 div[6,7,9,10] 的所有 24 个排列
javascript 中的排列可以按照此处的说明进行计算： JavaScript 中的排列？
它也可以使用 javascript/jquery 合并到这个场景中吗？

提前感谢您的所有回答。 任何帮助将非常感激。

Answer 1

正如评论中提到的，检查元素可见性的顺序无关紧要 - 在checkAnswer运行时它们不会随机显示和隐藏自己，所以只需检查一次。

我不知道您想要实现的确切逻辑，但是您可以通过传递要检查的元素数组、要显示/隐藏的元素和正确的答案元素来稍微简化它并使其可重用。

这样的事情应该让你开始

 function checkAnswer(ticks, crosses, correct) { // check each id with a tick, to see if they are ALL visible var isCorrect = ticks.every(function(id) { return $(id).is(':visible') }); // if they were all visible, then hide the ticks and crosses and show the correct box if(isCorrect) { $(ticks).add(crosses).hide(); $(correct).show(); } } $(function() { $('#q1').on('click', function() { checkAnswer(['#div1', '#div2'], ['#div4', '#div5'], '#div3'); }); $('#q2').on('click', function() { checkAnswer(['#div6', '#div7'], ['#div9', '#div10'], '#div8'); }); });

 .question { border:1px solid #000; width:50%; padding:5px; margin:5px; } .question > div { display:none; } .question > div.visible { display:block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="question"> <div id="div1" class="visible">Y</div> <div id="div2" class="visible">Y</div> <div id="div3">CORRECT!</div> <div id="div4">X</div> <div id="div5">X</div> <button id="q1">Check Answer</button> </div> <div class="question"> <div id="div6" class="visible">Y</div> <div id="div7">Y</div> <div id="div8">CORRECT!</div> <div id="div9">X</div> <div id="div10" class="visible">X</div> <button id="q2">Check Answer</button> </div>

Answer 2

只需将“正确”类添加到正确答案中，并计算同样可见的“正确”div 的数量。 如果它等于“正确”div 的数量（可见 + 不可见），则隐藏并显示想要的 div。

if ($(".correct:visible").length == $(".correct").length) {
  //hide and show
}