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

发布于 2024-09-02 19:44:59 字数 1689 浏览 7 评论 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');

那么该怎么办？

原文

I need your help. I have made a really clean and simple example to illustrate my problem. I have build my own jquery plugin:

(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);

As you can see I'm setting a default color and making it possible for the user to change it.
My problem/question is:
I have two paragraphs on the same page where I want to use the default color for the first and a different color for the second paragraph:

<!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>

My problem is that if I click on the second paragraph (p) that overrides the default color and afterwards clicks on the first p it will use the overwritten color and not the default color for the first p.
How can I ensure that the first p always will use the default color? I know I can just define the color for the first p as well but that is not an option here

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

So what to do?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疯狂的代价 2024-09-09 19:45:00

我认为这就是你所追求的（你需要改变你的 $.extend< /code>稍微调用一下，它当前正在设置 .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)，当前的 target 为 $.fn.setColorTest。 defaults，这意味着它会被覆盖，您需要像我上面那样每个实例都有一个对象，或者复制之前的选项，这样核心默认值就不会被覆盖。

这是一个显示输出的快速修改说明演示

I think this is what you're after (you need to change around your $.extend call slightly, it's currently setting properties on your .default object):

(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

You have to remember how $.extend() works, the format is $.extend(target, objectN), your current target is $.fn.setColorTest.defaults, which means it's getting overwritten, you need to either have an object per instance like I have above or copy your options before, so the core defaults aren't overwritten.

Here's a quick modified explanation demo showing the output

回复收藏 0 原文

记忆消瘦 2024-09-09 19:45:00

尝试：

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

我认为发生的情况是您直接合并到默认值中，而不是制作副本。通过提供一个空的 obj 作为扩展的第一个参数，我们肯定会创建一个副本。

Try:

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

I think what is happening is you are merging directly into your defaults as opposed to making a copy. By supplying an empty obj as the first arg for extend we make a copy for sure.

回复收藏 0 原文

~没有更多了~