以更好的方式編寫代碼？ 使用排列顯示/隱藏 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
}