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"}'> 

這一切工作正常，但如果我有一個以上的元素，然後data-attributes應用於所有這些都來自第一個元素。

我想能夠在data-spinner單獨地控制使用尺寸的每個元素，而不需要具有插件的兩個實例的，

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

與分配給它的不同的類。

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"}'>