Question

OUTLOOK：

我的网站有一个名为questions.html的网页。在页面中，有许多问题和答案。每个问题都是一个div元素。答案也是div并且最初是隐藏的，只有在单击按钮时才可见。

ATTEMPT＆amp;问题：的

我已经成功完成了一组问答，但是当我为另一组做同样的事情时，整个系统变得混乱。当我点击第二个问题div上的按钮时，第一个问题div的答案div出现了。但我希望第二个问题div上的按钮打开第二个问题div的答案div。

HTML：

<div id = "question1">
   <div id = "answer1" style = "display:none;">This is the 1st answer</div>
   <button id = "button1" onClick = "show()">Click For Answer</button>
</div>

<div id = "question2">
   <div id = "answer2" style = "display:none;">This is the 1st answer</div>
   <button id = "button2" onClick = "show()">Click For Answer</button>
</div>

JavaScript：

function show()
{
   var div=document.getElementById("answer1");
   var button=document.getElementById("button1");
   div.style.display="block";
   button.style.display="none";
}

我也注意到它发生是因为我的变量div和button不会选择带有下一组id的div（answer2和button2）

我的方法：

所以我想为每组问答div创建一个新函数。但这似乎非常不专业。那还有其他方法吗？

感谢您的帮助：）

Answer 1

将ID作为参数传递：

function show(answerID, buttonID)
{
   var div=document.getElementById(answerID);
   var button=document.getElementById(buttonID);
   div.style.display="block";
   button.style.display="none";
}

然后HTML将是：

<div id = "question1">
   <div id = "answer1" style = "display:none;">This is the 1st answer</div>
   <button id = "button1" onClick = "show('answer1', 'button1')">Click For Answer</button>
</div>

<div id = "question2">
   <div id = "answer2" style = "display:none;">This is the 1st answer</div>
   <button id = "button2" onClick = "show('answer2', 'button2')">Click For Answer</button>
</div>

Answer 2

如果你可以使用jQuery，

＆＃13;

$(".show-answer").on("click", function() {
  $(this).siblings(".answer").css("display", "block");
  $(this).css("display", "none");
});

＆＃13;

.answer {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
  <div class="answer">This is the 1st answer</div>
  <button class="show-answer">Click For Answer</button>
</div>

<div class="question">
  <div class="answer">This is the 1st answer</div>
  <button class="show-answer">Click For Answer</button>
</div>

＆＃13;

选择过程变得简单，HTML看起来很干净。

Answer 3

使用previoussibling显示答案div并通过this按钮

更新 previoussibling存在问题，即它将文本视为节点，因此我在工作演示中提供了一个可用于解决该问题的函数

function show(obj)
{
   var div=obj.previousSibling;
   var button=obj
   div.style.display="block";
   button.style.display="none";
}

<div id = "question1">
   <div id = "answer1" style = "display:none;">This is the 1st answer</div><button id = "button1" onClick = "show(this)">Click For Answer</button>
</div>


<div id = "question2">
   <div id = "answer2" style = "display:none;">This is the 1st answer</div><button id = "button2" onClick = "show(this)">Click For Answer</button>
</div>

＆＃13;

 function show(obj)
    {
      console.log(obj.previousSibling)
       var div=previousElementSibling(obj);
       var button=obj
       div.style.display="block";
       button.style.display="none";
    }

function previousElementSibling( elem ) {
     do {
         elem = elem.previousSibling;
        } 
     while ( elem && elem.nodeType !== 1 );
 return elem;
  }

＆＃13;

    <div id = "question1">
       <div id = "answer1" style = "display:none;">This is the 1st answer</div><button id = "button1" onClick = "show(this)">Click For Answer</button>
    </div>
    

    <div id = "question2">
       <div id = "answer2" style = "display:none;">This is the 1st answer</div><button id = "button2" onClick = "show(this)">Click For Answer</button>
    </div>

＆＃13;

Answer 4

你不需要所有ID / class trickery，
也使用内联JS很难维护。

相反，我只使用了class="qa"

＆＃13;

var qa = document.getElementsByClassName("qa");
function show(){
  this.parentNode.getElementsByTagName("DIV")[0].style.display = (this.clicked^=1) ? "block" : "none";
}
for(var i=0; i<qa.length; i++)
  qa[i].getElementsByTagName("BUTTON")[0].addEventListener("click", show, false);

＆＃13;

div.qa > div{
  display:none;
}

＆＃13;

<div class="qa">
  <div>This is the 1st answer</div>
  <button>Click For Answer</button>
</div>

<div class="qa">
  <div>This is the 1st answer</div>
  <button>Click For Answer</button>
</div>

＆＃13;

您甚至可以使用纯CSS ，只需将button替换为a并使用:target伪选择器

＆＃13;

div.qa > div{
  display:none;
}

div.qa > div:target{
  display:block;
}

＆＃13;

<div class="qa">
  <div id="one">This is the 1st answer</div>
  <a href="#one">Click For Answer</a>
</div>

<div class="qa">
  <div id="two">This is the 2nd answer</div>
  <a href="#two">Click For Answer</a>
</div>

＆＃13;

Javascript：一个函数，很多div

4 个答案: