当我点击一个按钮时，会出现相应的答案，而其他答案不应显示

Question

我有十个这样的按钮和答案，每个按钮和答案之间的唯一区别是答案：例子：  <div class="showhim">         <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button>    <div class="showme" style="display:none">1D, 2C</div></div>  <div class="showhim">         <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button>    <div class="showme" style="display:none">1A, 2D</div></div>  <div class="showhim">         <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button>    <div class="showme" style="display:none">1B, 2B</div></div>现在我想要的是，如果用户单击一个按钮，就会显示相关的答案。目前，它正在这样做，但有一个问题，它显示所有答案，这不是我想要的。我想要它，以便根据我单击的按钮，它只显示该按钮的答案，而不会显示其他答案。如何操作代码来合并我猜测的某种软循环来检索已单击的按钮并显示相应的答案并隐藏所有其他答案？var answers = document.getElementsByClassName("showme");  var revealAnswers = document.getElementsByClassName("answerbtn");function revealAnswersFunction() {  if (answers.style.display === "none") {    answers.style.display = "inline-block";  } else {    answers.style.display = "none";  }}

Answer 1

function revealAnswersFunction(e) {

var all =document.getElementsByClassName('showme');

for(let i=0;i<all.length;i++){

   all[i].style.display='none';

   }

var div = e.nextSibling.nextElementSibling;

div.style.display = "inline-block";

  

}

<div class="showhim"> 

        <button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>

    <div class="showme" style="display:none">1D, 2C</div>

</div>

  <div class="showhim"> 

        <button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>

    <div class="showme" style="display:none">1A, 2D</div>

</div>

  <div class="showhim"> 

        <button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>

    <div class="showme" style="display:none">1B, 2B</div>

</div>

Answer 2

一个简单的解决方案是在函数中使用索引：

<div class="showhim"> 

        <button class="answerbtn" onclick="revealAnswersFunction(0)">Click/Tap To Reveal Answers:</button>

    <div class="showme" style="display:none">1D, 2C</div>

</div>

  <div class="showhim"> 

        <button class="answerbtn" onclick="revealAnswersFunction(1)">Click/Tap To Reveal Answers:</button>

    <div class="showme" style="display:none">1A, 2D</div>

</div>

  <div class="showhim"> 

        <button class="answerbtn" onclick="revealAnswersFunction(2)">Click/Tap To Reveal Answers:</button>

    <div class="showme" style="display:none">1B, 2B</div>

</div>

function revealAnswersFunction(index) {

  if (answers[index].style.display === "none") {

    answers[index].style.display = "inline-block";

  } else {

    answers[index].style.display = "none";

  }

}

在 HTML 中，我向onclick="revealAnswersFunction(0)" . 然后在函数中使用该索引来获取要显示的答案。

为了将来参考，当您调用它时document.getElementsByClassName()，它会返回一个数组，因此您将需要要修改的数组项的索引。

一个简单的解决方案是在函数中使用索引：

<div class="showhim"> 

        <button class="answerbtn" onclick="revealAnswersFunction(0)">Click/Tap To Reveal Answers:</button>

    <div class="showme" style="display:none">1D, 2C</div>

</div>

  <div class="showhim"> 

        <button class="answerbtn" onclick="revealAnswersFunction(1)">Click/Tap To Reveal Answers:</button>

    <div class="showme" style="display:none">1A, 2D</div>

</div>

  <div class="showhim"> 

        <button class="answerbtn" onclick="revealAnswersFunction(2)">Click/Tap To Reveal Answers:</button>

    <div class="showme" style="display:none">1B, 2B</div>

</div>

function revealAnswersFunction(index) {

  if (answers[index].style.display === "none") {

    answers[index].style.display = "inline-block";

  } else {

    answers[index].style.display = "none";

  }

}

在 HTML 中，我向onclick="revealAnswersFunction(0)" . 然后在函数中使用该索引来获取要显示的答案。

为了将来参考，当您调用它时document.getElementsByClassName()，它会返回一个数组，因此您将需要要修改的数组项的索引。

一个更简洁的解决方案是使用事件侦听器将事件添加onclick到 javascript 中的按钮。

Answer 3

首先使用hide()方法隐藏所有答案，然后更改当前答案的显示属性。

function revealAnswersFunction(e) {

  $('.showme').hide();

  e.target.nextElementSibling.style.display = 'inline-block';

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="showhim"> 

    <button class="answerbtn" onclick="revealAnswersFunction(event)">Click/Tap To Reveal Answers:</button>

     <div class="showme" style="display:none">1D, 2C</div>

</div>

    

<div class="showhim"> 

    <button class="answerbtn" onclick="revealAnswersFunction(event)">Click/Tap To Reveal Answers:</button>

    <div class="showme" style="display:none">1A, 2D</div>

</div>

    

 <div class="showhim"> 

    <button class="answerbtn" onclick="revealAnswersFunction(event)">Click/Tap To Reveal Answers:</button>

     <div class="showme" style="display:none">1B, 2B</div>

 </div>