綁定並觸發jQuery模式中的事件

通常我使用jQuery綁定一個事件，然後立即調用它，比如當我設置了某些元素的定位或可見性以及什麼。綁定並觸發jQuery模式中的事件

$('#myElement').on('click', function() { 
    $('#myOtherElement').css('color', 'red'); 
}).click();

這可行，但模式有點難看，特別是如果我的第一個選擇器找到多個元素。然後事件被觸發多次，第一個選擇器找到每個元素一次。我最終會做這個：

$('.lots-of-elements').on('click', function() { 
    $('#myOtherElement').css('color', 'red'); 
}).first().click();

再次，這工作，但它不是我的最愛。有更好的模式可供使用嗎？

我知道我可以這樣做：

function onClick() { 
    $('#myOtherElement').css('color', 'red'); 
}; 

$('.lots-of-elements').on('click', onClick); 
onClick();

但是，這是更冗長。

來源

2016-01-07 dfoverdx

我認爲這僅僅是你虛榮，前兩個例子是完全沒有 – adeneo

是，也不是。一方面，它主要是想要語法糖。另一方面，假設我有多個'onClick'處理程序，我的班級不知道的。情況並非如此，但理論上可能如此。我必須將我的代碼放入一個新函數中，添加處理程序，然後調用該函數，而不是使用'.click（）'調用。它變得更加單調乏味。 – dfoverdx

我不明白你爲什麼要使用點擊事件，然後馬上點擊它。你不能只是把主要範圍的CSS編輯？

至於你的問題，你也可以創建一個jQuery函數是這樣的：

$.fn.extend({ 
    clickColor: function(element, color) { 
     $(this).on('click', function() { 
      $(element).css('color', color); 
     }); 
     return $(this); 
    } 
});

把它放在一個單獨的文件，並讓您的主文件乾淨的只有：

$('#clicker').clickColor('#other', 'red').click(); 
$('.clicker').clickColor('.another', '#00FF00').first().click();

有一個看看DEMO。

當然你也可以把.first()和.click()放在函數裏面，如果這就是你喜歡的。

然後看看這個DEMO 2

來源

2016-01-07 19:45:08 DaMaGeX

該CSS只是一個愚蠢的例子。一個真實的例子就像擁有一個隱藏div並顯示另一個按鈕（切換）的按鈕。當我使用asp.net的UpdatePanel時，最初顯示的和隱藏的div會恢復。所以，我跟蹤了狀態，並且如果用戶在最初隱藏的div上，我會觸發click事件以將它們切換回用戶以前見過的方式。希望這措辭不是太差。 – dfoverdx

綁定並觸發jQuery模式中的事件

回答

相關問題