データ属性付きのjQuery拡張プラグイン設定

Question

設定のためにdata-attributeを使用する簡易番号スピンナープラグインを変更できました。ここでは、コードの一部は、私のようなプラグインの初期化

(function($) { 
    $.fn.simpleSpinner = function(options) { 
     var settings = $.extend({ 
      size: 'large', 
      step: 1, 
     }, $(this).data('spinner'), options); 

     return this.each(function(e) { 
      var self = $(this); 
      ...... 

     }); 
    }; 
}(jQuery)); 

そして、次のとおりです。

$(function() { 
    $('.spinner').simpleSpinner(); 
}); 

<input class="spinner" type="number" value="1" min="1" max="10" data-spinner='{"size":"large"}'> 
<input class="spinner" type="number" value="1" min="1" max="10" data-spinner='{"size":"small"}'> 

すべては、私はより多くの、1つの要素を持っている場合、data-attributesが適用されていることを除いて、正常に動作します。このそれらのすべては最初の要素からです。

私はそれに割り当てられた異なるクラスに

$('.spinner2').simpleSpinner(); 

、個々のプラグインの2つのインスタンスを有することの必要性なしdata-spinnerにサイズを使用して各要素を制御できるようにしたいです。

Answer 1

ただ、ありがとう、あなたが要素

(function($) { 
 
    $.fn.simpleSpinner = function(options) { 
 
    return this.each(function(e) { 
 
     var $self = $(this); 
 
     var settings = $.extend({ 
 
     size: 'large', 
 
     step: 1, 
 
     }, $self.data('spinner'), options); 
 
     
 
     $self.after($("<pre/>",{text:JSON.stringify(settings)})) 
 
    }); 
 
    }; 
 
}(jQuery)); 
 

 
$(function() { 
 
    $('.spinner').simpleSpinner(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="spinner" type="number" value="1" min="1" max="10" data-spinner='{"size":"large"}'> 
 

 
<input class="spinner" type="number" value="1" min="1" max="10" data-spinner='{"size":"small"}'> 
 

 
<input class="spinner" type="number" value="1" min="1" max="10" data-spinner='{"size":"lorem"}'> 
 

 
<input class="spinner" type="number" value="1" min="1" max="10" data-spinner='{"size":"ipsum"}'>