javascript - 如何突出显示选定的答案？

Question

我试图突出显示我选择的答案。

我的意思是，我在每个问题中选择的所有答案都将以蓝色突出显示。但是正如您在我的代码中看到的那样，当我在其他问题中选择另一个答案时，上一个问题的突出显示将消失。我该如何解决？

非常感谢

function openPresent(event) {
  const answer = document.querySelectorAll(".option");
  for (let i = 0; i < answer.length; i++) {
    answer[i].style.backgroundColor = originalAnswerArray[i];
  }
  const input = event.currentTarget.querySelector("input")
  input.checked = true;
  event.currentTarget.style.backgroundColor = "blue";

}

const answer = document.querySelectorAll(".option");
let i;

let originalAnswerArray = [];
for (i = 0; i < answer.length; i++) {
  originalAnswerArray.push(answer[i].getAttribute("name"));
  answer[i].addEventListener("click", openPresent);
}

#attempt-quiz,
#review-quiz {
  width: 700px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

#attempt-quiz p,
#review-quiz p {
  margin: 30px 0 30px 0;
}

form {
  cursor: pointer;
  width: 700px;
  margin: 30px 0 30px 0;
}

.option,
.review-answer {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  width: auto;
  padding: 15px;
  background-color: #f1f1f1;
  position: relative;
}

.option:hover {
  background-color: #ddd;
}

label {
  margin-left: 15px;
}

<section id="attempt-quiz">
  <div id="quiz" class="hidden">

    <p><strong> Question 1 of 10</strong></p>
    <p>Question 1</p>
    <form name="ques01">
      <div class="option">
        <input type="radio" name="question1" value="option 1">
        <label><div >option 1 </div></label><br>


      </div>
      <div class="option">
        <input type="radio" name="question1" value="option 2">
        <label>option 2</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question1" value="option 3">
        <label>option 3</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question1" value="option 4">
        <label>option 4</label><br>

      </div>
    </form>

    <p><strong> Question 2 of 10</strong></p>
    <p>Question 2</p>
    <form name='ques02'>
      <div class="option">
        <input type="radio" name="question2" value="option 1">
        <label><div >option 1 </div></label><br>
      </div>
      <div class="option">
        <input type="radio" name="question2" value="option 2">
        <label>option 2</label><br>
      </div>
      <div class="option">
        <input type="radio" name="question2" value="option 3">
        <label>option 3</label><br>
      </div>
      <div class="option">
        <input type="radio" name="question2" value="option 4">
        <label>option 4</label><br>
      </div>
    </form>

    <p><strong> Question 3 of 10</strong></p>
    <p>Question 3</p>
    <form name="ques03">
      <div class="option">
        <input type="radio" name="question3" value="option 1">
        <label><div >option 1 </div></label><br>


      </div>
      <div class="option">
        <input type="radio" name="question3" value="option 2">
        <label>option 2</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question3" value="option 3">
        <label>option 3</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question3" value="option 4">
        <label>option 4</label><br>

      </div>
    </form>

    <p><strong> Question 4 of 10</strong></p>
    <p>Question 4</p>
    <form name="ques04">
      <div class="option">
        <input type="radio" name="question4" value="option 1">
        <label><div >option 1 </div></label><br>


      </div>
      <div class="option">
        <input type="radio" name="question4" value="option 2">
        <label>option 2</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question4" value="option 3">
        <label>option 3</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question4" value="option 4">
        <label>option 4</label><br>

      </div>
    </form>

    <p><strong> Question 5 of 10</strong></p>
    <p>Question 5</p>
    <form name="ques05">
      <div class="option">
        <input type="radio" name="question5" value="option 1">
        <label><div >option 1 </div></label><br>


      </div>
      <div class="option">
        <input type="radio" name="question5" value="option 2">
        <label>option 2</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question5" value="option 3">
        <label>option 3</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question5" value="option 4">
        <label>option 4</label><br>

      </div>
    </form>

    <p><strong> Question 6 of 10</strong></p>
    <p>Question 6</p>
    <form name="ques06">
      <div class="option">
        <input type="radio" name="question6" value="option 1">
        <label><div >option 1 </div></label><br>


      </div>
      <div class="option">
        <input type="radio" name="question6" value="option 2">
        <label>option 2</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question6" value="option 3">
        <label>option 3</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question6" value="option 4">
        <label>option 4</label><br>

      </div>
    </form>

    <p><strong> Question 7 of 10</strong></p>
    <p>Question 7

    </p>
    <form name="ques07">
      <div class="option">
        <input type="radio" name="question7" value="option 1">
        <label><div >option 1 </div></label><br>


      </div>
      <div class="option">
        <input type="radio" name="question7" value="option 2">
        <label>option 2</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question7" value="option 3">
        <label>option 3</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question7" value="option 4">
        <label>option 4</label><br>

      </div>
    </form>

    <p><strong> Question 8 of 10</strong></p>
    <p>Question 8</p>
    <form name="ques08">
      <div class="option">
        <input type="radio" name="question8" value="option 1">
        <label><div >option 1 </div></label><br>


      </div>
      <div class="option">
        <input type="radio" name="question8" value="option 2">
        <label>option 2</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question8" value="option 3">
        <label>option 3</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question8" value="option 4">
        <label>option 4</label><br>

      </div>
    </form>

    <p><strong> Question 9 of 10</strong></p>
    <p>Question 9</p>
    <form name="ques09">
      <div class="option">
        <input type="radio" name="question9" value="option 1">
        <label><div >option 1 </div></label><br>


      </div>
      <div class="option">
        <input type="radio" name="question9" value="option 2">
        <label>option 2</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question9" value="option 3">
        <label>option 3</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question9" value="option 4">
        <label>option 4</label><br>

      </div>
    </form>

    <p><strong> Question 10 of 10</strong></p>
    <p>Question 10</p>
    <form name="ques10">
      <div class="option">
        <input type="radio" name="question10" value="option 1">
        <label><div >option 1 </div></label><br>


      </div>
      <div class="option">
        <input type="radio" name="question10" value="option 2">
        <label>option 2</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question10" value="option 3">
        <label>option 3</label><br>

      </div>
      <div class="option">
        <input type="radio" name="question10" value="option 4">
        <label>option 4</label><br>

      </div>
    </form>

标签： javascripthtml

Answer 1

您应该使用“this”关键字。了解更多信息。请查看链接： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

为了更清楚，我写了一个示例代码：

function openPresent(event) {
    const input = this.querySelector("input")
    const name = input.getAttribute("name")
    input.checked = true;
    const otherAnswer = document.querySelectorAll(`[name="${name}"]`)
    for (i = 0; i < otherAnswer.length; i++) {
        otherAnswer[i].parentElement.style.backgroundColor = "#f1f1f1";
    }
    this.style.backgroundColor = "blue";
}

const answer = document.querySelectorAll(".option");
for (i = 0; i < answer.length; i++) {
    answer[i].addEventListener("click", openPresent);
}

#attempt-quiz,
#review-quiz {
    width: 700px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

#attempt-quiz p,
#review-quiz p {
    margin: 30px 0 30px 0;
}

form {
    cursor: pointer;
    width: 700px;
    margin: 30px 0 30px 0;
}

.option,
.review-answer {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    width: auto;
    padding: 15px;
    background-color: #f1f1f1;
    position: relative;
}

.option:hover {
    background-color: #ddd;
}

label {
    margin-left: 15px;
}

<section id="attempt-quiz">
            <div id="quiz" class="hidden">

                <p><strong> Question 1 of 10</strong></p>
                <p>Question 1</p>
                <form name="ques01">
                    <div class="option">
                        <input type="radio" name="question1" value="option 1">
                        <label><div >option 1 </div></label><br>


                    </div>
                    <div class="option">
                        <input type="radio" name="question1" value="option 2">
                        <label>option 2</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question1" value="option 3">
                        <label>option 3</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question1" value="option 4">
                        <label>option 4</label><br>

                    </div>
                </form>

                <p><strong> Question 2 of 10</strong></p>
                <p>Question 2</p>
                <form name='ques02'>
                    <div class="option">
                        <input type="radio" name="question2" value="option 1">
                        <label><div >option 1 </div></label><br>
                    </div>
                    <div class="option">
                        <input type="radio" name="question2" value="option 2">
                        <label>option 2</label><br>
                    </div>
                    <div class="option">
                        <input type="radio" name="question2" value="option 3">
                        <label>option 3</label><br>
                    </div>
                    <div class="option">
                        <input type="radio" name="question2" value="option 4">
                        <label>option 4</label><br>
                    </div>
                </form>

                <p><strong> Question 3 of 10</strong></p>
                <p>Question 3</p>
                <form name="ques03">
                    <div class="option">
                        <input type="radio" name="question3" value="option 1">
                        <label><div >option 1 </div></label><br>


                    </div>
                    <div class="option">
                        <input type="radio" name="question3" value="option 2">
                        <label>option 2</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question3" value="option 3">
                        <label>option 3</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question3" value="option 4">
                        <label>option 4</label><br>

                    </div>
                </form>

                <p><strong> Question 4 of 10</strong></p>
                <p>Question 4</p>
                <form name="ques04">
                    <div class="option">
                        <input type="radio" name="question4" value="option 1">
                        <label><div >option 1 </div></label><br>


                    </div>
                    <div class="option">
                        <input type="radio" name="question4" value="option 2">
                        <label>option 2</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question4" value="option 3">
                        <label>option 3</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question4" value="option 4">
                        <label>option 4</label><br>

                    </div>
                </form>

                <p><strong> Question 5 of 10</strong></p>
                <p>Question 5</p>
                <form name="ques05">
                    <div class="option">
                        <input type="radio" name="question5" value="option 1">
                        <label><div >option 1 </div></label><br>


                    </div>
                    <div class="option">
                        <input type="radio" name="question5" value="option 2">
                        <label>option 2</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question5" value="option 3">
                        <label>option 3</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question5" value="option 4">
                        <label>option 4</label><br>

                    </div>
                </form>

                <p><strong> Question 6 of 10</strong></p>
                <p>Question 6</p>
                <form name="ques06">
                    <div class="option">
                        <input type="radio" name="question6" value="option 1">
                        <label><div >option 1 </div></label><br>


                    </div>
                    <div class="option">
                        <input type="radio" name="question6" value="option 2">
                        <label>option 2</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question6" value="option 3">
                        <label>option 3</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question6" value="option 4">
                        <label>option 4</label><br>

                    </div>
                </form>

                <p><strong> Question 7 of 10</strong></p>
                <p>Question 7

                </p>
                <form name="ques07">
                    <div class="option">
                        <input type="radio" name="question7" value="option 1">
                        <label><div >option 1 </div></label><br>


                    </div>
                    <div class="option">
                        <input type="radio" name="question7" value="option 2">
                        <label>option 2</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question7" value="option 3">
                        <label>option 3</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question7" value="option 4">
                        <label>option 4</label><br>

                    </div>
                </form>

                <p><strong> Question 8 of 10</strong></p>
                <p>Question 8</p>
                <form name="ques08">
                    <div class="option">
                        <input type="radio" name="question8" value="option 1">
                        <label><div >option 1 </div></label><br>


                    </div>
                    <div class="option">
                        <input type="radio" name="question8" value="option 2">
                        <label>option 2</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question8" value="option 3">
                        <label>option 3</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question8" value="option 4">
                        <label>option 4</label><br>

                    </div>
                </form>

                <p><strong> Question 9 of 10</strong></p>
                <p>Question 9</p>
                <form name="ques09">
                    <div class="option">
                        <input type="radio" name="question9" value="option 1">
                        <label><div >option 1 </div></label><br>


                    </div>
                    <div class="option">
                        <input type="radio" name="question9" value="option 2">
                        <label>option 2</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question9" value="option 3">
                        <label>option 3</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question9" value="option 4">
                        <label>option 4</label><br>

                    </div>
                </form>

                <p><strong> Question 10 of 10</strong></p>
                <p>Question 10</p>
                <form name="ques10">
                    <div class="option">
                        <input type="radio" name="question10" value="option 1">
                        <label><div >option 1 </div></label><br>


                    </div>
                    <div class="option">
                        <input type="radio" name="question10" value="option 2">
                        <label>option 2</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question10" value="option 3">
                        <label>option 3</label><br>

                    </div>
                    <div class="option">
                        <input type="radio" name="question10" value="option 4">
                        <label>option 4</label><br>

                    </div>
                </form>