Question

我正在创建自己的简单jquery插件但我现在处于起步阶段，我只专注于帮助我调试自定义插件的事情。

此时我正在触发一个事件监听器，该元素是<a> 该插件仅用于识别另一个元素，没什么特别的。

的index.html

<a href="javascript:void(0);" class="funclass" id="funhref">Click Me</a>
<br />
<table id="randomElement">
  <tr>
   <td>Testing table cell</td>
  </tr>
</table>

<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $("a#funhref").on('click', function (event) {

        $("#randomElement").identifyElement();

    }); 
}); 
</script>

identifyElement.js

(function ($) {
    $.fn.extend({
        identifyElement: function(options) {

                    // goal 1:  (identify the type of element)
                    console.log( $.type($(this)) ); // returns "object"

                    // goal 2:  (what's the element that fired off the 'click' method? 

        }
    })//eof extend()
})(jQuery);

据我所知。

对于所有你的核心调试器，你可以看到我正在努力了解我正在使用的元素。（完全有助于未来的项目）

目标1： 在这种情况下，我很想知道#randomElement是一个html表。如果它是其他东西，那么显然我想打印到console它是什么，或者它是否被识别。

- 你可以看到console.log( $.type($(this)) );返回“对象”，但我希望它返回“table”

目标2： 我点击href来触发事件并触发插件来实现它的魔力。我也喜欢在控制台上打印信息。（我不知道什么时候我可能需要知道什么会产生一个事件）

同样，我没有构建一个jquery插件来做任何事情，除了练习调试和识别我正在使用的元素。

任何人都可以帮我完成我未完成的2个目标吗？

Answer 1

您可以使用.is（）方法查找特定标记。

如果传递jquery在click（）回调中提供的事件对象，则event.target将是触发事件的元素。

Answer 2

目标1：

this[0].tagName

将返回“TABLE”。

目标2：我认为您不能在插件中获得A元素。如果需要，您需要要求调用者将this或事件对象作为参数传递。

Answer 3

这是目标1和2的工作小提琴。我暂时删除了你的选项参数，替换为事件参数

http://jsfiddle.net/Q5cV7/2/

 $("a#funhref").on('click', function (event) {

    $("#randomElement").identifyElement(event);

}); 


(function ($) {
$.fn.extend({
    identifyElement: function(event) {

    // goal 1:  (identify the type of element)
    console.log( this[0].tagName ); 

     // goal 2: what's the element that fired off the 'click' method? 
    console.log( event.target );
      }
   })//eof extend()
   })(jQuery);

更新：

这是使用您的选项参数的版本：

http://jsfiddle.net/Q5cV7/4/

 $("a#funhref").on('click', function (event) {

   $("#randomElement").identifyElement({event : event});

}); 


 (function ($) {
 $.fn.extend({
    identifyElement: function(options) {

    // goal 1:  (identify the type of element)
    console.log( this[0].tagName ); // returns "object"

   // goal 2:  (what's the element that fired off the 'click' method? 
   console.log( options.event.target );
    }
 })//eof extend()
 })(jQuery);

jQuery - 将事件监听器的选择器传递给插件

3 个答案: