javascript - 如何避免编写 10 个函数，只编写一个

Question

编辑:谢谢，但这些答案不是最好的方法，而且初学者很难理解。

我有这样的结构:

<div>Title <a href="#" onclick="a1()">+</a>
<div id="b1">...content...</div></div>

..... n times this structure ....

<div>Title <a href="#" onclick="function aN()">+</a>
<div id="bN">...content...</div></div>

当用户单击+号时，内容应该显示或消失。

    function a1(){
            $('#b1').toggle(); 
    }

     .... too many functions .....

    function aN(){
            $('#bN').toggle(); 
    }

如何在一个函数中重写所有这些函数以编写更少的代码？

Answer 1

您可以使其在标记本身中更具描述性，使用自定义属性data-target(或使用href本身)并存储目标的ID。

<div>Title <a data-target="#b1" class="toggler" href="#">+</a>
<div id="b1">...content...</div></div>

..... n times this structure ....

<div>Title <a data-target="#b2" class="toggler" href="#" >+</a>
<div id="bN">...content...</div></div>

只需注册一个函数:-

$(function(){
   $('.toggler').on('click', function(e){
      e.preventDefault();
      $($(this).data('target')).toggle();
   });
});

这样，您就可以将目标的任何选择器放入属性中，无论它出现在标记中的任何位置(不仅仅是下一个元素)，并远离内联点击处理程序。