Question

我正在创建一个jquery插件，我的html就像

<select class="filter">
    <option value="">Select Brand</option>
    <option value="value1">value1</option>
    <option value="value2">value2</option>
    <option value="value3">value3</option>
</select>

我的插件代码就像

(function( $ ) {
    $.fn.filterCategory = function( options ) {
        $(".filter option").each(function(){
            var text = $(this).text();
            $(this).attr("data-val",text);
        });
        // other code...
    };
}( jQuery ));

我称之为

$("select.filter").filterCategory();

问题是，如果我想通过id

来调用这个插件

$("select#filter").filterCategory();

或其他类或id

 $("select.new_filter").filterCategory();
 $("select#new_filter").filterCategory();

然后html就像

<select id="filter">
    <option>...</option>
</select>

然后我将不得不对我的插件进行更改。这意味着它仅适用于 .filter 。我怎样才能使这段代码动态化

$(".filter option").each(function(){ ... }

Answer 1

您需要使用this关键字来引用插件初始化的元素：

(function($) {
  $.fn.filterCategory = function(options) {
    $(this).find('option').each(function() {
      var text = $(this).text();
      $(this).attr('data-val', text);
    });

    // other code...
  };
}(jQuery));

您还应确保从插件返回jQuery对象，假设您希望维护jQuery使用的链接模式。最后请注意，您可以简化each()循环，只需调用attr()：

$(this).find('option').attr('data-val', function() {
  return $(this).text();
});

这当然是假设您需要在DOM中拥有data-val属性。如果没有，我建议使用data()代替使用jQuery的内部缓存。

在jquery插件中创建动态选择器

1 个答案: