Question

我是javascript的新手。我有一个Jquery问题。

假设我有一个插件，popup.js，我按如下方式调用插件：

$(document).ready(function(){
                    $('#pop-it').modal('hide'); 
               });

在我的插件代码中，我有以下代码：

function modal(option , _relatedtarget) {
     console.log(this);   // 1st console.log
    return this.each(function() {
      console.log(this);  // 2nd console.log
    });
  }

我获得的第一个控制台的值，日志是

Object { 0: <div#pop-it.modal.fade>, length: 1, context: HTMLDocument → pop-it.html, selector: "#pop-it" }

我获得的第二个console.log的值是：

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="pop-it" class="modal fade" style="display: none;">

为什么不同的结果？

我的第二个问题：

也是

之前应该改变的背景

return this.each(function() {

});

因为它是一个新的函数定义??

Answer 1

在jQuery插件的直接范围内this是一个jQuery对象，这意味着你不必包装它。

通常你会这样做

$(this).each(function() { ...

但是在jQuery插件中你可以做到

this.each(function() { ...

因为this已经是jQuery包装器/集合对象。

另一方面，在each()回调函数this内不 jQuery对象，它是本机DOM节点，所以要获得相同的你必须做的结果

$.fn.plugin = function() {

    console.log(this); // jQuery object

    this.each(function() {
        console.log( $(this) ) // jQuery object

        console.log( this ) // native DOM node
    });
});

Answer 2

您得到两个不同的结果，因为this的值取决于它内部函数的调用方式。你有两个不同的功能。他们每个人都为this获得了自己的价值。

这个内部的值返回this.each（function（）{}）

2 个答案: