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插件最佳实践（允许通过为调用插件调用的jQuery对象返回each()来链接）：

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

Answer 2

这样做：

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

点击jQuery插件中的事件

2 个答案: