Как установить отдельные параметры в jquery

Question

Я хочу установить отдельные параметры для моего кода плагина jquery. но я не могу установить это индивидуально. Я пытался с функцией "$ .each". Я использую jQuery с последней версией

$.fn.myMethods = function(option) {
  this.each(function() {
    const $item = $(this);
    $item.myMethods.option = $.extend({
      now: 1
    }, option);
  });
  return this;
}

$.fn.resultOfMyMethods = function() {
  this.each(function() {
    const $item = $(this);
    console.log($item.myMethods.option.now)
  });
  return this;
}

$('input').eq(0).myMethods({
  now: 123
});
$('input').eq(1).myMethods({
  now: 456
});

$('input').eq(0).resultOfMyMethods();
$('input').eq(1).resultOfMyMethods();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>
<input/>

ожидаемые результаты

123
456

фактические результаты

456
456

Answer 1

Вы назначаете свойство для объекта $.fn.myMethods, а не для экземпляра.

Вы можете использовать data() для хранения отдельных элементов.

$.fn.myMethods = function(option) {

  const opts = $.extend({
    now: 1
  }, option);

  this.each(function() {
    const $item = $(this);
    $item.data('options', opts); // set on element
  });
  return this;
}

$.fn.resultOfMyMethods = function() {
  this.each(function() {
    const $item = $(this);
    console.log($item.data('options').now);// get from element
  });
  return this;
}

$('input').eq(0).myMethods({
  now: 123
});
$('input').eq(1).myMethods({
  now: 456
});

$('input').eq(0).resultOfMyMethods();// 123
$('input').eq(1).resultOfMyMethods();// 456

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>
<input/>