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

ご覧のとおり、デフォルトの色を設定し、ユーザーが変更できるようにしています。 私の問題/質問は次のとおりです。 同じページに2つの段落があり、最初の段落にデフォルトの色を使用し、2番目の段落に異なる色を使用します。

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

私の問題は、デフォルトの色を上書きする2番目の段落（p）をクリックし、その後最初のpをクリックすると、最初のpのデフォルトの色ではなく、上書きされた色が使用されることです。最初のpが常にデフォルトの色を使用するようにするにはどうすればよいですか？最初のpの色も定義できることはわかっていますが、ここではオプションではありません。

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

じゃあ何をすればいいの？

4

2 に答える 2

0

試す：

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

何が起こっているのかというと、コピーを作成するのではなく、デフォルトに直接マージしているということだと思います。拡張の最初の引数として空のobjを指定することにより、確実にコピーを作成します。

于 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 に答える