Мне нужна твоя помощь. Я сделал действительно чистый и простой пример, чтобы проиллюстрировать мою проблему. Я создал свой собственный плагин 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');
Так что же делать?