Question

对此有什么更好的解决方法，而不是对10个不同的元素重复多次if语句？

HTML：

 <div id="rightWrongContainer">
        <div id="q1" class="rightWrong"></div>
        <div id="q2" class="rightWrong"></div>
        <div id="q3" class="rightWrong"></div>
        <div id="q4" class="rightWrong"></div>
        <div id="q5" class="rightWrong"></div>
        <div id="q6" class="rightWrong"></div>
        <div id="q7" class="rightWrong"></div>
        <div id="q8" class="rightWrong"></div>
        <div id="q9" class="rightWrong"></div>
        <div id="q10" class="rightWrong"></div>
    </div>

Js：

     if (counter == 1 && answer == userInput){
            var green = document.getElementById("q1").style.backgroundColor="green";
          }
          else {
            var red = document.getElementById("q1").style.backgroundColor="red";
          }
    if (counter == 2 && answer == userInput){
            var green = document.getElementById("q2").style.backgroundColor="green";
          }
          else {
            var red = document.getElementById("q2").style.backgroundColor="red";
          }

    if (counter == 3 && answer == userInput){
            var green = document.getElementById("q3").style.backgroundColor="green";
          }
          else {
            var red = document.getElementById("q3").style.backgroundColor="red";
          }

以此类推...

编辑：看到这张图片My project

每次用户提交答案时，我都希望根据答案是否正确来更改div（图像链接中的圆圈），因此'answer == userInput'但正确的div必须等于正确的问题数所以我创建了一个计数器，所以我知道用户在问什么问题，但是我不想为每个元素创建一个if语句'counter == 1，counter == 2依此类推...

Answer 1

我不完全理解问题，但这可以解决

var items = document.querySelectorAll('#rightWrongContainer>.rightWrong');

items.forEach(function(item) {
    item.style.backgroundColor = answer == userInput ? 'green' : 'red'
}

Answer 2

您可以使用.children属性访问选定元素中元素的HTMLCollection。在您的示例中，您可以

var elemList = document.getElementById("rightWrongContainer").children;

我为您编写了一个有关如何使用它的示例：http://jsfiddle.net/30u847gL/

此外，请阅读以下内容：https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children

快乐编码！

Answer 3

您可以通过finding the children of a parent来获得一组元素：

List

或通过getting elements by class：

var qs = document.getElementById("rightWrongContainer").children;

您可以通过多种方法iterate over a group of elements，例如

var qs = document.getElementsByClassName("rightWrong");

有效的解决方法，而不是使用大量的if语句？

3 个答案: