Работа со свойства, при использовании fn.extend в jQuery
Тестовый пример.
index.html:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<p>
<input id="gotype" type="checkbox"/>
<label for="gotype">Read only</label>
<br/>
<input id="go" type="button" value="GO" />
</p>
</body>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</html>
js/test.js:
(function($) {
$.fn.extend({
setVariable: function(){
this.testVariable = true;
alert('Set: '+this.testVariable);
},
getVariable: function(){
alert('Get: '+this.testVariable);
}
});
})(jQuery);
$(document).ready(function() {
$('#go').click(function() {
if ($('#gotype')[0].checked) {
$(this).getVariable();
} else {
$(this).setVariable();
}
});
});
Ссылка на пример: http://test.cms3.org/peretyaka/1/ В результате, при setVariable(), выводится "Set: true", а, если затем вызвать getVariable() - "Get: undefined". Если объявлять свойства, то результат тот же. В общем-то вопрос один: почему? И буду благодарен за ссылку на материал с описанием, а то в документации jQuery маловато данных. |
Вы свойство экземпляру объекта jQuery добавляете
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script>
$.fn.extend({
test: function () {
alert(this.constructor == jQuery);
}
});
$(document).test();
</script>
</body>
</html>
В этом объекте содержится ссылка на элемент #gotype, который может быть и не меняется, а вот сам этот объект-обертка может быть каждый раз новымЦитата:
function jQuery(selector) {…}
jQuery.prototype = {
find: …,
child: …,
next: …,
wrap: …,
…,
getVariable: …,
setVariable: …
};
function $(selector) {
return new jQuery(selector);
}
хотя в jQuery это одной функцией сделано Используйте метод data, чтобы хранить данные в DOM-элементах. |
| Часовой пояс GMT +3, время: 15:41. |