在初始化後更新jQuery插件設置

Question

我已經搜索過了，無法讓我的插件正確更新。我在初始化時設置了插件選項，但是之後我需要更改每個設置的值並重新運行插件。以下是我迄今爲止：

(function ($) { 
 
    $.fn.testPlugin = function (options) { 
 
    \t \t // Default settings 
 
     var settings = $.extend({ 
 
      padding: '0', 
 
      margin: '0' 
 
     }, options); 
 

 
     return this.each(function() { 
 
     \t $(this).css({ 
 
      \t 'padding' : settings.padding, 
 
      'margin' : settings.margin 
 
      }); 
 
     }); 
 
    } 
 
}(jQuery)); 
 

 
// Initialize the plugin 
 
$('#main').testPlugin({ 
 
    padding: '20px', 
 
    margin: '20px 0' 
 
}); 
 

 
// Update the plugin settings with new values and change the padding/margin on click 
 
$('#update').on('click', function() { 
 
    var newPadding = $('#newPadding').val(); 
 
    var newMargin = $('#newMargin').val(); 
 
    console.log(newPadding, newMargin) 
 
    
 
    // Here is where i'm stuck. 
 
    // How to update the plugin settings and re-run it? 
 
    
 
})

#main { 
 
    width: 300px; 
 
    background: #333; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <p>Lorem ipsum dummy text</p> 
 
</div> 
 

 
<input type="text" id="newPadding" value="20px" /> 
 
<input type="text" id="newMargin" value="20px 0" /> 
 
<button id="update">Update</button>

Answer 1

你嘗試運行它，你初始化它以同樣的方式？

$('#main').testPlugin({ 
    padding: newPadding, 
    margin: newMargin 
}); 

Answer 2

您的插件並沒有真正做任何事情，會有什麼用更新的設置，如果你想重置CSS值到別的東西，你只需要調用插件更多的時間與其他一些價值觀。

如果您確實有使用，他們可以被更新的東西設置的插件，你必須建立某種形式的系統，其中第一個參數被選中，並設置相應的設置等

當你更新設置

(function($) { 
 
    $.fn.testPlugin = function(options, value) { 
 
    if (typeof options === 'string' && value) { 
 
     this.data(options, value); 
 
    } else { 
 
     var opts = $.extend({ 
 
    \t \t text: 'This is a default text !' 
 
    \t \t }, options); 
 

 
     return this.each(function() { 
 
     $(this).on('click', function() { 
 
      console.log($(this).data('text')); 
 
     }) 
 
     }).data(opts); 
 
    } 
 
    } 
 
}(jQuery)); 
 
/* ------------------------------- */ 
 
// Initialize the plugin 
 
$('#main').testPlugin({ 
 
    text: 'This works just fine' 
 
}); 
 

 
// change the setting 
 
$('#change').on('click', function() { 
 
    $('#main').testPlugin('text', 'So does this !'); 
 
    /* ---- */ 
 
    $(this).css('color', 'red'); 
 
    $('#main').text('Click me again!'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main">Click me !</div> 
 
<br /> 
 
<br /> 
 
<br /> 
 
<button id="change">Now change the text</button>