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