Javascript 如何单击以显示各种元素而不复制功能？

我知道如何进行切换：

<div onclick="text1()">Hello</div>
<div id="click1">World</div>

<script>
function text1() {
  var x = document.getElementById("click1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

但是，如果我有几个文本要像那样单击，如何通过不复制脚本来保持简短？也就是说，如果我有：

<div onclick="text1()">Hello</div>
<div id="click1">World</div>

<div onclick="text2()">Hi</div>
<div id="click2">Earth</div>

...

<div onclick="textn()">I see you</div>
<div id="clickn">Universe</div>

---

那么我该怎么做才能不复制n个函数呢？

您可以这样做：

<div onclick="text(this.getAttribute('value'))" value="1">Hello</div>
<div id="click1">World</div>

<div onclick="text(this.getAttribute('value'))" value="2">Hello</div>
<div id="click2">World</div>

<script>
function text(n) { // take a the value as a parameter
  var x = document.getElementById(`click${n}`); // get id in format 'click1'
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

标记到每个可单击的div中，让function=text接受一个名为id的参数。然后在HTML中，传递一个要切换的Dom元素的id

即使您可以创建另一个函数ex:textAll，它也接受css选择器的一个参数。然后使用document.queryselectoral和for循环切换与选择器匹配的所有元素

如下图所示：

函数textid{ var x=document.getElementById； 如果x.style.display==无{ x、 style.display=块； }否则{ x、 style.display=无； } } 函数textAllselectorPath{ var items=document.querySelectorAllselectorPath； […项目]。外汇=>{ 如果x.style.display==无{ x、 style.display=块； }否则{ x、 style.display=无； } } } 你好 世界 A. A1 C C1 都有身份证 都有身份证 全部的

---

所有您可以在函数调用中传递一个值，以指示希望函数引用的id：

函数textid{ var x=document.getElementById； 如果x.style.display==无{ x、 style.display=块； }否则{ x、 style.display=无； } } 你好 世界 你好 Earth您需要使用类选择器和dom遍历进行标准编码

我认为这是一个明智的解决方案

你可以试试这个

document.queryselectoral.button.foreachel函数{ el.addEventListener“单击”，函数e{ e、 防止违约； 如果e.target.nextElementSibling.classList.包含“显示”{ e、 target.nextElementSibling.classList.remove'display'； } 否则{ e、 target.nextElementSibling.classList.add'display'； } } }; .展示{ 显示：无； } 点击 世界 点击 世界 点击 世界

---

不如用jQuery来代替更少的行呢

请参见此示例：

---

这有帮助吗？

我将此代码嵌入到我的WordPress站点，但它不起作用。你知道为什么吗？很明显，我将js代码放在tagit中，它一开始不会隐藏文本，单击按钮也不会做任何事情。没有错误，你在你的网站上写的是我的代码吗？还是你在改变什么？@Ooker add class=文本显示。。display类以最初隐藏文本。。

value="n" 

$(document).ready(function(){
    $('.clicker').click(function(){
        $(this).parent().find('.click').toggle();
    });
});