單擊jQuery插件中的事件

Question

我想用jQuery插件做一些相對簡單的事情。我只是不完全確定它內部的點擊事件。

這裏是一個可行的簡單的例子...

$.fn.testy = function() { 
    var testElem = this.find('p'); 
    testElem.click(function(){ 
     testElem.addClass('highlighted'); 
     ^^^^^^^^ 
    }); 

}; 

$("div").testy(); 

現在，如果不是寫testElem.addClass('highlighted');，我把this.addClass('highlighted');，我會得到這個錯誤：Uncaught TypeError: Object #<HTMLParagraphElement> has no method 'addClass'

我明白this指的jQuery在這方面。我通過重用變量來實現它，但是感覺不對。我如何瞄準我點擊的東西？

例如，如果我只是寫一個劇本，我會寫這樣的事：

$('a').click(function(){ 
    $(this).addClass('active'); 
}); 

我怎麼能做到這一點，而只針對指定的元素中的a元素？

Answer 1

讓我解釋一下評論：

$.fn.testy = function() { 
    // `this` here refers to all `DIV`s as jQuery objects 

    var testElem = this.find('p'); 
    // `testElem` is now collection of all `P`s from all `DIV`s, as jQuery object 

    testElem.click(function(){ // <<-- 
     // Note you are now inside another function 
     // This function gets called for each `P` 

     // of course you don't want to apply yo all `testElem`, only clicked one 
     // `this` inside the new function is the `P` AS DOM Element not jQuery 
     var $testP = $(this); // just wrapping one `P` in jQuery object 
     // Now you can 
     $testP.addClass('highlighted'); 
     // You didn't need the variable, but for explanation 
    }); // <<-- finished click function 

    // back to plugin function  
}; 

這裏有如下的jQuery插件的最佳實踐（允許鏈通過返回each()爲jQuery的一個更好的例子物件叫你的插件）：

http://jsfiddle.net/Meligy/s2wN4/

Answer 2

做這樣的：

$(this).addClass('highlighted');