我怎样才能避免写 10 个函数，让它只有一个

How can I avoid writing 10 functions, make it just one

本文关键字：函数 有一个 能避免      更新时间：2023-09-26

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

我有这个结构： 

<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(); 
    }

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

您可以在标记本身中使其更具描述性，使用自定义属性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();
   });
});

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

你可以通过使用通用类来将你的 JavaScript 挂接到来抽象你的代码。 js小提琴示例

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

jQuery

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

你试过吗？

<div>Title <a href="#" onclick="a('b1')">+</a>
<div id="b1">...content...</div></div>
..... n times this structure ....
<div>Title <a href="#" onclick="a('bN')">+</a>
<div id="bN">...content...</div></div>
 function a(id){
            $('#' + id).toggle(); 
    }

<div class="container">Title <a href="#" class="link">+</a>
<div class="content">...content...</div></div>
..... n times this structure ....
<div class="container">Title <a href="#" class="link">+</a>
<div class="content">...content...</div></div>
<script>
    $(".container .link").bind('click', function(event) {
        event.preventDefault();
        $(this).parent().find('.content').toggle();
    });
</script>

向所有 + 锚点添加一个虚拟类。 例如 ANC

然后

$('.anc').on('click', function (){
   $(this).next('div').toggle();
}

演示

HTML：使用 CSS 类

<div>Title <a href="#" class="myanchor">+</a>
<div id="b1">...content...</div></div>
<!--..... n times this structure ....-->
<div>Title <a href="#" class="myanchor">+</a>
<div id="bN">...content...</div></div>

.JS

$(function() {
    $('a.myanchor').on('click', a);
    function a(e) {
        e.preventDefault();
        $(this).next('div').toggle();
    }
});

使用 jQuery 的 on 方法：

.HTML：

<div>Title <a href="#" class="toggle">+</a>
<div class="content">...content...</div></div>
<div>Title <a href="#" class="toggle">+</a>
<div class="content">...content...</div></div>
<div>Title <a href="#" class="toggle">+</a>
<div class="content">...content...</div></div>

JavaScript：

$(document).on('click', '.toggle', function(e) {
    $(e.currentTarget).parent().find('.content').toggle();
});

工作 jsfiddle：http://jsfiddle.net/uq1mafs3/

首先，由于各种原因，使用内联事件处理程序被认为是糟糕的形式。

也就是说，有几种方法可以做你喜欢的事情。 就个人而言，我会选择这种方法：

<div>Title <a href="#" onclick="toggleThing()" data-thing-to-toggle="b1">+</a>
<div id="b1">...content...</div></div>

function toggleThing() {
  var toggleId = this.getAttribute("data-thing-to-toggle");
  var $target = $(toggleId);
  $target.toggle();
}

一个简单的解决方案是传递元素的 id：

function a(id) {
    $('#' + id).toggle();
}

您的 HTML 将如下所示：

<div>Title <a href="#" onclick="a('b1');">+</a>
<div id="b1">...content...</div></div>
..... n times this structure ....
<div>Title <a href="#" onclick="a('bN');">+</a>
<div id="bN">...content...</div></div>

您应该能够将要切换的元素的 id 作为函数参数传递：

<div>Title <a href="#" onclick="toggle('#b1')">+</a>
<div id="b1">...content...</div></div>
..... n times this structure ....
<div>Title <a href="#" onclick="toggle('#bN')">+</a>
<div id="bN">...content...</div></div>

然后，您可以只实现一个函数：

function toggle(id){
        $(id).toggle(); 
}

有关更多信息，请参阅 JavaScript 函数参数。

相关文章：