Javascript 如何重用函数而不重复它？

我编写了一个函数，在使用JavaScript单击时隐藏和显示选项卡。在添加选项卡时，我还添加了执行任务的功能。我确信有一种方法可以缩小这个范围，这样我就不必每次都创建一个新函数并重用我拥有的函数

这是我的JS（）：

函数showDiv（）{
var info=document.getElementById（'detailInformation'）；
如果（info.style.display==“无”）{
info.style.display=“块”；
info.style.transition=“0.2s放松”；
}否则{
info.style.display=“无”；
info.style.transition=“0.2s放松”；
}
}
函数showDiv2（）{
var info2=document.getElementById（'detailInformation2'）；
如果（info2.style.display==“无”）{
info2.style.display=“block”；
info2.style.transition=“0.2s放松”；
}否则{
info2.style.display=“无”；
info2.style.transition=“0.2s放松”；
}
}
函数showDiv3（）{
var info3=document.getElementById（'detailInformation3'）；
如果（info3.style.display==“无”）{
info3.style.display=“block”；
info3.style.transition=“0.2s放松”；
}否则{
info3.style.display=“无”；
info3.style.transition=“0.2s放松”；
}
}
函数showDiv4（）{
var info4=document.getElementById（'detailInformation4'）；
如果（info4.style.display==“无”）{
info4.style.display=“block”；
info4.style.transition=“0.2s放松”；
}否则{
info4.style.display=“无”；
info4.style.transition=“0.2s放松”；
}
}

这是我的html：

<div class="block" style="text-align: center;">
  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 1</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv()" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 2</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv2()" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation2" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 3</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv3()" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation3" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 4</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv4()" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation4" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

</div>

表1
一些文本

表2
一些文本

表3
一些文本

表4
一些文本

---

这可能很简单，我只是一个初学者：）

与其重复类似的函数，不如允许它接受一个参数，例如

id

  function showDiv(id) {
    var info = document.getElementById(id);
    if (info.style.display === "none") {
      info.style.display = "block";
      info.style.transition = "0.2s ease-out";
    } else {
      info.style.display = "none";
      info.style.transition = "0.2s ease-out";
    }
  }

对于您的点击事件，按如下方式更改它们

onclick="showDiv('detailInformation2')"

---

与其重复类似的功能，不如允许它接受一个参数，例如

id

  function showDiv(id) {
    var info = document.getElementById(id);
    if (info.style.display === "none") {
      info.style.display = "block";
      info.style.transition = "0.2s ease-out";
    } else {
      info.style.display = "none";
      info.style.transition = "0.2s ease-out";
    }
  }

对于您的点击事件，按如下方式更改它们

onclick="showDiv('detailInformation2')"

我更新了小提琴：

您需要一个具有id的函数，以便可以重用该函数的主逻辑：

function showDiv(id) {
  var info = document.getElementById(id);
  if (info.style.display === "none") {
    info.style.display = "block";
    info.style.transition = "0.2s ease-out";
  } else {
    info.style.display = "none";
    info.style.transition = "0.2s ease-out";
  }
}

然后在HTML中，传递div的id，例如：

<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation2')" type="button" value="More information" /></div>
  </div>

我更新了小提琴：

您需要一个具有id的函数，以便可以重用该函数的主逻辑：

function showDiv(id) {
  var info = document.getElementById(id);
  if (info.style.display === "none") {
    info.style.display = "block";
    info.style.transition = "0.2s ease-out";
  } else {
    info.style.display = "none";
    info.style.transition = "0.2s ease-out";
  }
}

然后在HTML中，传递div的id，例如：

<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation2')" type="button" value="More information" /></div>
  </div>

函数showDiv（id）{
var info=document.getElementById（id）；
如果（info.style.display==“无”）{
info.style.display=“块”；
info.style.transition=“0.2s放松”；
}否则{
info.style.display=“无”；
info.style.transition=“0.2s放松”；
}
}

HTML

<div class="block" style="text-align: center;">
  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 1</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation1')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 2</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation2')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation2" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 3</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation3')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation3" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 4</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation4')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation4" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>
</div>

表1
一些文本

表2
一些文本

表3
一些文本

表4
一些文本

函数showDiv（id）{
var info=document.getElementById（id）；
如果（info.style.display==“无”）{
info.style.display=“块”；
info.style.transition=“0.2s放松”；
}否则{
info.style.display=“无”；
info.style.transition=“0.2s放松”；
}
}

HTML

<div class="block" style="text-align: center;">
  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 1</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation1')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 2</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation2')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation2" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 3</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation3')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation3" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 4</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation4')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation4" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>
</div>

表1
一些文本

表2
一些文本

表3
一些文本

表4
一些文本

您的意思是要消除javascript中所有重复的代码吗？如果是这样，请查看javascript参数传递，也称为参数传递。你可以把这一切归结为一个函数，并将你想要的id作为参数传递。你需要查看这三个函数中的每一个，并思考它们之间的区别，在你的例子中，它只是元素id，因此，创建一个接受id作为参数的函数。您的意思是要消除javascript中所有重复的代码吗？如果是这样，请查看javascript参数传递，也称为参数传递。您可以将所有这些归结为一个函数，并将所需的id作为参数传递。您需要查看这三个函数中的每一个，并思考它们之间的区别，在您的情况下，这只是元素id，因此创建一个接受id作为参数的函数。代码转储并不能获得好的答案。您应该解释这是如何以及为什么解决他们的问题的。我建议阅读，“代码转储并不能得到好的答案。你应该解释这是如何以及为什么解决他们的问题的。我建议阅读，”这正是我想要的！谢谢你的快速回复，因为你是第一个回答的人，我认为你的回答被接受了。谢谢你给我上的课，以后我会记住这一点：）这正是我想要的！谢谢你的快速回复，因为你是第一个回答的人，我认为你的回答被接受了。谢谢你的教训，我以后会记住这一点：）