Question

基本上我想显示一个特定的div，具体取决于哪些div已经可见。为了更容易理解：div 1,2代表'ticks'，div 4,5代表'crosses'而div 3代表'正确答案'。因此，如果div 1和2是可见的，我想隐藏所有其他div，包括1,2但显示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的所有24种排列[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。

src/org/...

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

2 个答案: