我怎样才能重用功能而不再重复呢？

时间：2018-03-13 12:40:57

标签： javascript html css

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

这是我的JS（https://jsfiddle.net/ehwcma6j/1/）：

<script type="text/javascript">
      function showDiv() {
        var info = document.getElementById('detailInformation');
        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";
        }
      }
      function showDiv2() {
        var info2 = document.getElementById('detailInformation2');
        if (info2.style.display === "none") {
          info2.style.display = "block";
          info2.style.transition = "0.2s ease-out";
        } else {
          info2.style.display = "none";
          info2.style.transition = "0.2s ease-out";
        }
      }
      function showDiv3() {
        var info3 = document.getElementById('detailInformation3');
        if (info3.style.display === "none") {
          info3.style.display = "block";
          info3.style.transition = "0.2s ease-out";
        } else {
          info3.style.display = "none";
          info3.style.transition = "0.2s ease-out";
        }
      }
      function showDiv4() {
        var info4 = document.getElementById('detailInformation4');
        if (info4.style.display === "none") {
          info4.style.display = "block";
          info4.style.transition = "0.2s ease-out";
        } else {
          info4.style.display = "none";
          info4.style.transition = "0.2s ease-out";
        }
      }
</script>

这是我的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>

这可能很简单，我只是一个初学者:)

4 个答案:

答案 0 :(得分：5)

不要重复类似的功能，而是允许它采取参数，例如expect { expect(wojit.do_thing).to be true }.to change { wojit.value } 

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";
    }
  }

答案 1 :(得分：2)

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";
        }
      }
//call function like

showDiv('detailInformation');
showDiv('detailInformation2');
showDiv('detailInformation3');
showDiv('detailInformation4');

答案 2 :(得分：1)

我更新了小提琴：https://jsfiddle.net/ehwcma6j/5/

你想要一个带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>

答案 3 :(得分：1)

<script type="text/javascript">

      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";
        }
      }

</script>

<强> 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>
相关问题
最新问题