Javascript：一个函数，多个div

展望：

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

尝试和问题：

我已经成功地完成了一组问题和答案，但当我对另一组问题和答案进行同样的操作时，整个系统就会变得一团糟。当我点击第二个问题区的按钮时，第一个问题区的答案区显示出来。但是我想用第二个问题区的按钮打开第二个问题区的答案区

HTML:

我还注意到这是因为我的变量

div

和

button

不会用下一组ID（answer2和button2）选择div

我的方法：

所以我想为每一组问答div创建一个新函数。但这似乎很不专业。 那么还有别的办法吗

---

感谢您的帮助：）

将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>

这是第一个答案
单击以获取答案
这是第一个答案
单击以获取答案

将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>

这是第一个答案
单击以获取答案
这是第一个答案
单击以获取答案

使用

以前的兄弟姐妹

显示答案div并将

此

传递给按钮

<>强>更新< /强>存在代码< >前sibIs//> >它认为文本是节点的问题，所以我在工作演示中提供了一个可以用来克服这个问题的函数

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>

这是第一个答案单击以获取答案
这是第一个答案单击以获取答案

使用

以前的兄弟姐妹

显示答案div并将

此

传递给按钮

<>强>更新< /强>存在代码< >前sibIs//> >它认为文本是节点的问题，所以我在工作演示中提供了一个可以用来克服这个问题的函数

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>

这是第一个答案单击以获取答案
这是第一个答案单击以获取答案

你不需要所有的身份/职业欺骗，
此外，使用内联JS很难维护

请看这里，我只使用了

class=“qa”

var qa=document.getElementsByClassName（“qa”）；
函数show（）{
this.parentNode.getElementsByTagName（“DIV”）[0].style.display=（this.clicked^=1）？“块”：“无”；
}
对于（变量i=0；i div{
显示：无；
}

这是第一个答案
单击以获取答案
这是第一个答案
单击以获取答案

你不需要所有的身份/职业欺骗，
此外，使用内联JS很难维护

请看这里，我只使用了

class=“qa”

var qa=document.getElementsByClassName（“qa”）；
函数show（）{
this.parentNode.getElementsByTagName（“DIV”）[0].style.display=（this.clicked^=1）？“块”：“无”；
}
对于（变量i=0；i div{
显示：无；
}

这是第一个答案
单击以获取答案
这是第一个答案
单击以获取答案

如果可以使用jQuery，

$（“.show answer”）。在（“单击”，函数（）上）{
$（this.sides（“.answer”）.css（“display”，“block”）；
$（this.css（“显示”、“无”）；
})；

。回答{
显示：无；
}

这是第一个答案
单击以获取答案
这是第一个答案
单击以获取答案

如果可以使用jQuery，

$（“.show answer”）。在（“单击”，函数（）上）{
$（this.sides（“.answer”）.css（“display”，“block”）；
$（this.css（“显示”、“无”）；
})；

。回答{
显示：无；
}

这是第一个答案
单击以获取答案
这是第一个答案
单击以获取答案

一般来说，你可以将参数传递给函数…我不明白。你可以详细说明你也可以使用纯CSS，或者至少使用一个更好/更干净的HTML标记，只需几行JS。一般来说，你可以将参数传递给函数…我不明白。你可以详细说明你也可以使用纯CSS，或者至少使用一个更好/更干净的HTML标记吗只有两个JS linesOMG！完全忘记了参数！它工作了，竖起大拇指：）OMG！完全忘记了参数！它工作了，竖起大拇指：）请小心

以前的兄弟姐妹

，它可能也是一个字符串（实际上是OP的情况）

previousElementSibling

最好确保您确实获得了一个元素。这看起来比较短，但在实现时我没有得到任何结果。你能改进一下答案吗？@Teemu是的，这个问题已经被破解了：）@A.B糟糕，你的代码弄得一团糟，所有的元素都乱了套。但是无论如何，谢谢你的回答。请注意

以前的兄弟姐妹

，它也可能是一个字符串（在OP的情况下实际上是这样的）

previousElementSibling

最好确保您确实获得了一个元素。这看起来比较短，但在实现时我没有得到任何结果。你能改进一下答案吗？@Teemu是的，这个问题已经被破解了：）@A.B糟糕，你的代码弄得一团糟，所有的元素都乱了套。但无论如何，谢谢你的回答