javascript - 初始化后更新 jQuery 插件设置

Question

我已经搜索过 SO，但无法让我的插件正确更新。我在初始化时设置了插件选项，但之后我需要更改每个设置的值并重新运行插件。这是我到目前为止所拥有的:

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

        return this.each(function () {
        	$(this).css({
          	'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
});