Question

假设我们有这段代码：

$.fn.obList   = function(options){
  alert(options.o1);
}

$('li').obList({
  o1: $(this).attr('class')
});

我试图在给予函数的选项对象中访问所选元素（即 li ），但是$(this)不起作用并返回 undefined 。

Answer 1

下面：

$('li').obList({
  o1: $(this)
});

this的上下文是window。所以你需要使用：

$('li').each(function () {
  $(this).obList({
    o1: $(this)
  });
});

您也可以使用：

$.fn.obList   = function(options) {
  alert($(this).attr("class"));  // This `this` here refers to the element.
};

输出：http://output.jsbin.com/qekonadomu

＆＃13;

$.fn.obList   = function(options){
  alert(options.o1);
};

$('li').each(function () {
  $(this).obList({
    o1: $(this).attr("class")
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<ol>
  <li class="item-1"></li>
  <li class="item-2"></li>
  <li class="item-3"></li>
</ol>

＆＃13;

为此，我得到：

item-1
item-2
item-3

作为输出。

Answer 2

您必须创建一个范围，其中this是元素，并且可以通过多种方式完成，常见的方法是使用each()

$('li').each(function() {
    $(this).obList({
        o1: $(this).attr('class')
    });
});

另一种方法是让插件处理它

$.fn.obList   = function(options){

    return this.each(function() {
        options = options || {};

        options.o1 = $(this).attr('class');
    });
}

$('li').obList();

jQuery：在对象文字中使用$（this）

2 个答案: