如何使用相同的功能仅使一个元素可见

Question

我正在尝试设置一个常见问题页面。我可以为每个问题分配一个单独的函数并将答案存储在我的 HTML 中并显示为隐藏，然后该事件将触发该函数以显示隐藏的答案。我试图找到一种方法来使用相同的功能来实现这一点。到目前为止，这就是我所拥有的示例文本。目前发生的情况是，如果我单击第一个问题，所有答案都会立即出现，我显然不希望这样，并且希望一次出现一个答案，谢谢

     <script>
 
      function displayAnswer () { 

var getParent = document.getElementsByClassName("questions");
var getParentNode = getParent[0];
var child = getParentNode.childNodes[3];
child.style.visibility = "visible";

var getParent = document.getElementsByClassName("questions");
var getParentNode = getParent[1];
var child = getParentNode.childNodes[3];
child.style.visibility = "visible";

var getParent = document.getElementsByClassName("questions");
var getParentNode = getParent[2];
var child = getParentNode.childNodes[3];
child.style.visibility = "visible";
}

如果我想购买物品会发生什么 这需要 600 英镑，但我们提供折扣 如果我想购买物品会发生什么 这需要 600 英镑，但我们提供折扣 如果我想购买物品会发生什么 这需要 600 英镑，但我们提供折扣

Answer 1

我现在已经解决了这个问题，通过使用关键字 this 然后传递函数

     function displayAnswer (element)

     element.parentNode.secondElementChild.style.visibility= "visible";

Answer 2

这按要求工作：

document.getElementById('allquestions').onclick=function(ev) { 
  let child=ev.target;   // get clicked element
  if(child.tagName=='P' && Array.prototype.indexOf.call(child.parentNode.children,child)==0) 
    child.nextElementSibling.style.display="block";
}

#allquestions div p:nth-child(2) {display:none}

<div id="allquestions">
  
    <div>
    <p>Click on first</p>
     <p> this cost 400 pounds but we offer dis counts </p>
     </div>
  
     <div>
     <p>second item,</p>
     <p>this cost 500 pounds but we offer dis counts </p>
     </div>
  
  
     <div>
     <p>Third item</p>
     <p>this cost 600 pounds but we offer dis counts </p>
     </div>
</div>

我将您的 html 和脚本部分都缩短到了最低限度。

说明：
点击事件被定义为“延迟”事件。 IE。父 <div id="allquestions"> 的 onclick 属性设置为所有问题的点击处理程序。这对于动态创建（增长）的页面是有利的，因为我不需要单独分配点击处理程序。在处理程序函数中，我检查哪个元素收到了点击，只有在收到点击时才展开操作

• <p> 元素和
• 如果它是另一个元素的第一个子元素。

第二次检查通过：Array.prototype.indexOf.call(child.parentNode.children,child)==0 完成。 DOM 元素集合 (child.parentNode.children) 中元素 child 的索引是通过调用数组方法 indexOf() 计算的。 .call() 方法执行在集合child.parentNode.children 上应用Array.prototype 函数的技巧。或者我可以这样做：

[...child.parentNode.children].indexOf(child)==0

[...collection] 中的扩展运算符将集合转换为适当的数组，然后我可以从中使用 .indexOf 方法。