JQuery自建插件問題 - 默認值被覆蓋

我需要你的幫助。我做了一個非常簡潔的例子來說明我的問題。我已經建立了我自己的jQuery插件：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');

那麼該怎麼辦？

來源

2010-05-23 Bruno

我覺得這是你以後在做什麼（你需要在你的$.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，這意味着它覆蓋掉了，你需要或者有每個實例的對象就像我上面Ø r之前複製您的選項，所以核心默認值不會被覆蓋。

Here's a quick modified explanation demo showing the output

來源

2010-05-23 17:02:30

這很有意義。感謝您讓我走上正確的軌道Nick。 – Bruno 2010-05-23 17:58:30

嘗試：

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

我認爲正在發生的事情是，你是直接合併到您的默認值，而不是製作副本。通過提供一個空obj作爲擴展的第一個參數，我們可以確保一個副本。

來源

2010-05-23 16:58:03 prodigitalson

JQuery自建插件問題 - 默認值被覆蓋

回答

相關問題