Мой плагин не работает с несколькими селекторами

Question

Может быть, это что-то простое, но у меня есть проблема.

Я создал плагин, но он хорошо работает только с одним селектором, если я поставлю несколько, вот откуда проблема.

Хотя я использую $(this), чтобы выбрать текущий выбор, он заканчивает выбор всех и заменяет значение во всех выборках, где он их находит. Я оставляю свой jsfiddle для просмотра.

Посмотрите на выбор # 1 и # 3.

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

Смотрите мой jsfiddle

Answer 1

Я не собираюсь переписывать ваш плагин для вас, но покажу вам основы выделения экземпляров элементов в вашем плагине.

this внутри функции плагина - это объект jQuery, который включает все соответствующих элементов из селекторов.

Вы хотите, чтобы внутренний each зациклился и изолировал каждый из этих элементов.

Ниже приведен очень грубый плагин, которыйпросто оборачивает каждый из select в родительском контейнере и добавляет прослушиватель события изменения к каждому экземпляру. Сам по себе он не очень практичен, но должен дать вам основание восстановить тот, над которым вы работаете

$.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>