单击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');