如何避免编写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();
   });
});

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

Answer 2

您可以使用通用类来将您的javascript挂钩来抽象代码. jsFiddle示例

HTML

<div>
    Title <a href="#" class="toggleNext">+</a>
    <div id="b1">...content...</div>
</div>

jQuery的

$('.toggleNext').click(function(e){
    e.preventDefault();
    $(this).next().toggle()
});