Форум

Greck · #1 (**permalink**) 27.07.2011, 19:12

Тестовый пример.

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 маловато данных.

Octane · #2 (**permalink**) 27.07.2011, 21:28

Вы свойство экземпляру объекта 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, который может быть и не меняется, а вот сам этот объект-обертка может быть каждый раз новым

Цитата:

…
$(this).getVariable();
…
$(this).setVariable();
…

Тут происходит примерно следующее:

function jQuery(selector) {…}

jQuery.prototype = {
	find: …,
	child: …,
	next: …,
	wrap: …,
	…,
	getVariable: …,
	setVariable: …
};

function $(selector) {
	return new jQuery(selector);
}

хотя в jQuery это одной функцией сделано

Используйте метод data, чтобы хранить данные в DOM-элементах.

Форум

Справочник

Discord чат

Курсы javascript