0

我需要你的帮助。我做了一个非常干净和简单的例子来说明我的问题。我已经构建了自己的 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');

那么该怎么办?

4

2 回答 2

0

尝试:

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

我认为正在发生的事情是您直接合并到您的默认值中,而不是复制。通过提供一个空的 obj 作为 extend 的第一个参数,我们可以肯定地制作一个副本。

于 2010-05-23T16:58:03.610 回答
0

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

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

你可以在这里看到一个演示

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

这是一个快速修改的解释演示,显示输出

于 2010-05-23T17:02:30.007 回答