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

jQuery：两次调用函数

4 个答案: