jQuery：两次调用一个函数

Question

我试图两次运行一个函数。 页面加载一次，然后再次单击。 不知道我在做什么错。 这是我的代码：

$('div').each(function truncate() {
    $(this).addClass('closed').children().slice(0,2).show().find('.truncate').show();
});

$('.truncate').click(function() {

    if ($(this).parent().hasClass('closed')) {
        $(this).parent().removeClass('closed').addClass('open').children().show();
    }

    else if ($(this).parent().hasClass('open')) {
        $(this).parent().removeClass('open').addClass('closed');
        $('div').truncate();
        $(this).show();
    }

});

问题出在第13行，我在其中调用truncate(); 再次运行。 知道为什么它不起作用吗？

在此处编辑 jsFiddle： http ： //jsfiddle.net/g6PLu/

Answer 1

那是一个命名函数文字。

该名称仅在功能范围内可见。
因此，在处理程序外部不存在truncate 。

相反，创建一个普通函数并将其传递给each() ：

function truncate() { ...}

$('div').each(truncate);

Answer 2

您得到什么错误信息？

您应该创建函数，然后根据需要调用它

定义功能

function truncate(){
  $('div').each(function(){

  });
}

然后调用函数

truncate();

Answer 3

另一种方法是建立然后触发自定义事件：

$('div').on('truncate', function() {
    $(this).......;
}).trigger('truncate');

然后，在其他需要执行相同操作的地方，再次触发该事件。

截断所有div：

$('div').trigger('truncate');

同样，您只能截断一个特定的div：

$('div#myDiv').trigger('truncate');

唯一的先决条件是已附加自定义事件处理程序，因此...

$('p').trigger('truncate');

不会执行任何操作，因为尚未为p元素建立截断处理程序。

Answer 4

我知道已经有一个可以接受的答案，但是我认为最好的解决方案是使用插件http://jsfiddle.net/g6PLu/13/。这似乎符合OP的要求（能够调用$('div').truncate ）。 并使代码更简洁

(function($) {
    $.fn.truncate = function() {
        this.addClass('closed').children(":not('.truncate')").hide().slice(0,2).show();
    };
    $.fn.untruncate = function() {
        this.removeClass('closed').children().show();
    };                
})(jQuery);

$('div').truncate();

$('.truncate').click(function() {
  var $parent = $(this).parent();
  if ($parent.hasClass('closed')) {
    $parent.untruncate();
  } else {
    $parent.truncate();
  }
});