3

我想用 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仅针对指定元素内的元素时，我怎么能做到这一点？

4

2 回答 2

5

让我在评论中解释一下：

$.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/

于 2013-05-12T04:18:06.557 回答
0

像这样做：

$(this).addClass('highlighted');
于 2013-05-12T03:49:12.587 回答