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

Question

Basically I want to show a particular div depending on which divs are already visible. To make it easier to understand: divs 1,2 represent 'ticks', divs 4,5 represent 'crosses' and div 3 represents 'Correct Answer'. So, if divs 1 and 2 are visible, I want to hide all other divs including 1,2 but show div 3. Similarly, if divs 2,1 are visible, all other divs should be hidden including 1,2 but div 3 should be visible.
So, I realised I was essentially checking the Permutations of divs [1,2] before showing div 3. This is the following behaviour, which works:

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

But if I have a scenario where I have to check for- say 4 divs, it becomes a huge task to keep writing it this way. For example:

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

} 

Obviously I haven't mentioned all 24 permutations here of divs[6,7,9,10]
Permutations in javascript can be calculated as explained here: Permutations in JavaScript?
Can it be incorporated in this scenario too using javascript/jquery?

Thanks for all your answers in advance. Any help would be much appreciated.

Answer 1

As mentioned in the comments, it does not matter which order you check the visibility of the elements - they will not randomly show and hide themselves while checkAnswer is running, so just check them once.

I don't know the exact logic you want to achieve, but you can simplify this a little, and make it reusable, by passing an array of the elements to check, the elements to show/hide and the correct answer element.

Something like this should get you started

 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

Just add the class "correct" to the correct answers and count the number of "correct" div that also visible. If it is equal to the number of "correct" div (visible + not visible) then hide and show the wanted divs.

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