JQuery 自建插件问题 - 默认值被覆盖答案

【问题标题】：JQuery selfbuild plugin question - default value is overwrittenJQuery 自建插件问题 - 默认值被覆盖
【发布时间】：2011-02-22 23:17:27
【问题描述】：

我需要你的帮助。我做了一个非常干净和简单的例子来说明我的问题。我已经构建了自己的 jquery 插件：

(function($) {
  $.fn.setColorTest = function(options) {
    options = $.extend($.fn.setColorTest.defaults,options);
    return this.each(function() {
      $(this).css({ 'color': options.color});
    });
  }
  $.fn.setColorTest.defaults = {
    color: '#000'
  };
})(jQuery);

如您所见，我正在设置默认颜色并让用户可以更改它。 我的问题/问题是： 我在同一页面上有两个段落，我想为第一个段落使用默认颜色，为第二个段落使用不同的颜色：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Color Test</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script type="text/javascript">
      $(document).ready(function() {
         $('a#click').click(function() {
            $('#test1').setColorTest(); 
         });  
         $('a#click2').click(function() {
            $('#test2').setColorTest({color: '#fff666'});
         }); 
      });
    </script>
</head>
<body>
    <a id="click">click here</a>
    <a id="click2">click here2</a>
    <p id="test1">Test 1</p>
    <p id="test2">Test 2</p>    
</body>
</html>

我的问题是，如果我单击覆盖默认颜色的第二段 (p)，然后单击第一个 p，它将使用覆盖的颜色而不是第一个 p 的默认颜色。如何确保第一个 p 始终使用默认颜色？我知道我也可以为第一个 p 定义颜色，但这不是这里的选项

$('#test1').setColorTest('color': '#000');

那该怎么办？

【问题讨论】：

标签： jquery plugins overwrite

【解决方案1】：

试试：

options = $.extend({},$.fn.setColorTest.defaults,options||{});

我认为正在发生的事情是您直接合并到您的默认设置中，而不是复制。通过提供一个空的 obj 作为 extend 的第一个 arg，我们肯定会创建一个副本。

【讨论】：

【解决方案2】：

我认为这就是你所追求的（你需要稍微改变你的 $.extend 调用，它目前正在你的 .default 对象上设置属性）：

(function($) {
  $.fn.setColorTest = function(options) {
      options = $.extend({ color: '#000' }, options);
    return this.each(function() {
      $(this).css({ 'color': options.color});
    });
  }
})(jQuery);

You can see a demo here

你必须记住 $.extend() 是如何工作的，格式是 $.extend(target, objectN)，你当前的目标是 $.fn.setColorTest.defaults，这意味着它被覆盖了，你需要每个实例都有一个对象就像我在上面或之前复制你的选项一样，所以核心默认值不会被覆盖。

Here's a quick modified explanation demo showing the output

【讨论】：

这很有意义。感谢尼克让我走上正轨。