Question

也许这很简单，但是我有一个问题。

我创建了一个插件，但是它仅适用于单个选择器，如果我放几个，那就是问题所在。

尽管我使用$(this)选择当前选择，但最终会选择全部并替换所有选择中找到它们的值。我让我的jsfiddle进行审核。

查看选择的＃1和＃3。

$(document).ready(function() {
  $("#sel1, #sel2, #sel3").SelectPopup();
});

See my jsfiddle

Answer 1

我不会为您重写插件，但将向您展示在插件中隔离元素实例的基础。

插件函数中的

this是一个jQuery对象，其中包含选择器中匹配元素的 all 。

您希望内部each循环并隔离每个元素实例。

以下是一个非常粗糙的插件，它仅将每个选择包装在父容器中，并向每个实例添加更改事件侦听器。它本身不是很实用，但是应该为您重建工作基础奠定基础

$.fn.mySelect = function(options) {
  // `this` is jQuery object that contains all elements in collection
  // we return it so the plugin can be chained to other jQuery methods if needed
  // also use `each` to isolate individual elements in the collection
  return this.each(function() {
    // `this` is instance of element in collection
    var $currentSelect = $(this);
    // wrap each element and add a change event listener
    $currentSelect.wrap('<div class="select-wrapper">')
      .change(function() {
        console.log('Select id "' + this.id + '" changed')
      });
  });
}

$("#sel1, #sel2, #sel3").mySelect()

.select-wrapper {
  display: inline-block;
  border: 1px solid #ccc;
  margin-right: 20px;
  padding: 1em
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel1">
  <option value="1">A1</option>
  <option value="2">A2</option>
  <option value="3">A3</option>
</select>

<select id="sel2">
  <option value="10">B1</option>
  <option value="20">B2</option>
  <option value="30">B3</option>
</select>

<select id="sel3">
  <option value="1">C1</option>
  <option value="2">C2</option>
  <option value="3">C3</option>
</select>

我的插件无法与多个选择器一起使用

1 个答案: