用更好的方式編寫代碼？使用排列顯示/隱藏div？

Question

基本上我想顯示一個特定的div取決於哪些div已經可見。爲了便於理解：div 1,2表示'ticks'，div 4,5表示'crosses'，div 3表示'正確答案'。因此，如果div 1和div 2可見，我想隱藏所有其他div，包括1,2但顯示div 3.同樣，如果div 2,1可見，則所有其他div應該隱藏，包括1,2但div 3應該可見。
所以，我意識到，我基本上檢查的div [1,2]的排列組合顯示DIV 3.這是以下行爲，其工作之前：

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

} 

很顯然，我還沒有提到的所有24個排列這裏的div [6,7,9,10]在JavaScript
排列組合可以計算如下解釋：Permutations in 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 
}