Обратное действие по клику

psywalker · October 23, 2009

Ребят, начну пожалуй задавать глупые вопросы:

1) Есть вобщем такой код, он действует так: Жму на ссылку и картинка становится большей ширины и высоты.

Задача:

2) Что нужно прописать или добавить в код, что-бы при повторном нажатии на ссылку картинка приобретала начальную форму, тоесть свои прежние размеры?

	<script language="javascript">
		function test(){
			   document.getElementById('img').width='200';
				document.getElementById('img').height='150';
		}
	</script>

		<a href="#" onclick="test('')">Сылка модная</a><br />
		<img src="snoop.gif" id="img" width="100px" alt="" />

Edited October 23, 2009 by psywalker

s0rr0w · October 23, 2009

Ребят, начну пожалуй задавать глупые вопросы:
2) Что нужно прописать или добавить в код, что-бы при повторном нажатии на ссылку картинка приобретала начальную форму, тоесть свои прежние размеры?
	<script language="javascript">
		function test(){
			   document.getElementById('img').width='200';
				document.getElementById('img').height='150';
		}
	</script>

		<a href="#" onclick="test('')">Сылка модная</a><br />
		<img src="snoop.gif" id="img" width="100px" alt="" />

Нужно перед присваиванием запомнить предыдущее значение.

1. onclick="test(this)

2. function test( imgNode )

3.

if ( !imgNode.oldWidth ) { imgNode.oldWidth = imgNode.width; imgNode.oldHeight = imgNode.height; }

imgNode.ticked = !imgNode.ticked;

var w = ( imgNode.ticked )? 200 : imgNode.oldWidth;

var h = ( imgNode.ticked )? 150 : imgNode.oldHeight;

imgNode.width = w;

imgNode.height = h;

Но это плохой путь :angry:

psywalker · October 23, 2009

Спасибо дружище, но вот пишу так и при повторном нажатии ничего не происходит:

function test(){

document.getElementById('img').width='200';

document.getElementById('img').height='150';

}

</script>

<a href="#" onclick="test(this)">Сылка модная</a><br />

2. Вот так тоже ничего

function test(imgNode){

document.getElementById('img').width='200';

document.getElementById('img').height='150';

if ( !imgNode.oldWidth ) { imgNode.oldWidth = imgNode.width; imgNode.oldHeight = imgNode.height; }

imgNode.ticked = !imgNode.ticked;

var w = ( imgNode.ticked )? 100 : imgNode.oldWidth;

var h = ( imgNode.ticked )? 100 : imgNode.oldHeight;

imgNode.width = w;

imgNode.height = h;

}

</script>

<a href="#" onclick="test(this)">Сылка модная</a><br />

Edited October 23, 2009 by psywalker

s0rr0w · October 23, 2009

Хых.. тупое бездумное копирование кода - зло.

<script language="javascript">
function test(imgNode){
//document.getElementById('img').width='200';
//document.getElementById('img').height='150';
if ( !imgNode.oldWidth ) { imgNode.oldWidth = imgNode.width; imgNode.oldHeight = imgNode.height; }
imgNode.ticked = !imgNode.ticked;
var w = ( imgNode.ticked )? 200 : imgNode.oldWidth;
var h = ( imgNode.ticked )? 150 : imgNode.oldHeight;
imgNode.width = w;
imgNode.height = h;
}

</script>

<a href="#" onclick="test(document.getElementById('img'))">Сылка модная</a>

<img src="snoop.gif" id="img" width="100" height="75" alt="" >

Внимательно изучи и найди 4 различия.

psywalker · October 23, 2009

Да я всё понимаю друг, но блин, для меня это настолько тёмный лес, что ты себе и представить не можешь. Вот смотрю я в твой код и въехать вообще не могу, что значит присваивание, какие отличия..уухх..жесть)) Я бы сначала код посмотрел бы решения, а потом может в нём бы уже нашёл истину, а так я этот пазл в жизни не соберу :angry:

s0rr0w · October 23, 2009

Да я всё понимаю друг, но блин, для меня это настолько тёмный лес, что ты себе и представить не можешь. Вот смотрю я в твой код и въехать вообще не могу, что значит присваивание, какие отличия..уухх..жесть)) Я бы сначала код посмотрел бы решения, а потом может в нём бы уже нашёл истину, а так я этот пазл в жизни не соберу

Да там все примитивно.

Для начала разберем пункт

onclick="test(document.getElementById('img'))"

При нажатии на ссылку будет вызвана функция test, которой как параметр будет передана ссылка на ноду с картинкой.

function test(imgNode){

Функция test на вход принимает параметр imgNode.

Я долго думал, как лучше пояснить механизм передачи параметров в функцию, и нашел вполне адекватную ассоциацию.

Представь, что тебе нужно попасть к врачу.

Перед дверью врача вы все отдельные личности: Саша, Маша, Даша.

Но как только вы переступаете порог кабинета, с точки зрения врача вы все пациенты. Как тебя зовут его меньше всего волнует, таких как ты у него десятки каждый день. И называет врач всех людей одним словом - пациент. Люди меняются, название остается одним и тем же.

Так вот, все переданные в функцию объекты будут для этой функции называться imgNode.

if ( !imgNode.oldWidth ) { imgNode.oldWidth = imgNode.width; imgNode.oldHeight = imgNode.height; }

Если у картинки нет свойства oldWidth, то мы его присвоим. Таким образом запомним старое значение ширины и высоты, то, которое было у картинки перед трансформацией

imgNode.ticked = !imgNode.ticked;

Свойство ticked расскажет нам в каком именно состоянии находится картинка. Это булиановая переменная, будет иметь значение или true (новая ширина), или false (старая ширина).

Эта строка инвертирует значение этой переменной.

var w = ( imgNode.ticked )? 200 : imgNode.oldWidth;

var h = ( imgNode.ticked )? 150 : imgNode.oldHeight;

Переменной w присвоится значение 200, если ticked = true, или старое значение ширины. Агалогично с высотой.

imgNode.width = w;

imgNode.height = h;

Тут мы присваиваем картинке новую ширину и высоту.

}

Great Rash · October 23, 2009

Так наверное понятней будет:

function sizeToggle(i) {
	var img = typeof i == 'string' ? document.getElementById(i) : i;

	if (!img.flag) {
		img.w = img.width;
		img.h = img.height;
		img.width = img.w * 2;
		img.height = img.w * 2;
		img.flag = true;
	} else {
		img.width = img.w;
		img.height = img.h;
		img.flag = false;
	}
}

Упс, вызов забыл: <img src="test-img/group-arrow-open.gif" width="100" height="100" alt="" onclick="sizeToggle(this);" />

Да и sOrrOw уже расписал все...

Edited October 23, 2009 by Great Rash

psywalker · October 23, 2009

Ребят, спасибо вам большое за пример и помощь, когда разберусь, отпишу обязательно

mishka · October 23, 2009

Так наверное понятней будет:
function sizeToggle(i) {
	var img = typeof i == 'string' ? document.getElementById(i) : i;

	if (!img.flag) {
		img.w = img.width;
		img.h = img.height;
		img.width = img.w * 2;
		img.height = img.w * 2;
		img.flag = true;
	} else {
		img.width = img.w;
		img.height = img.h;
		img.flag = false;
	}
}
Упс, вызов забыл: <img src="test-img/group-arrow-open.gif" width="100" height="100" alt="" onclick="sizeToggle(this);" />
Да и sOrrOw уже расписал все...

Какая суть этой строки:

var img = typeof i == 'string' ? document.getElementById(i) : i;

В чем будет принципиальное отличие если записать так:

function sizeToggle(img) {	   
	if (!img.flag) {
		img.w = img.width;
		img.h = img.height;
		img.width = img.w * 2;
		img.height = img.w * 2;
		img.flag = true;
	} else {
		img.width = img.w;
		img.height = img.h;
		img.flag = false;
	}
}

s0rr0w · October 23, 2009

Какая суть этой строки:
var img = typeof i == 'string' ? document.getElementById(i) : i;

Можно передавать или идентификатор, или сразу ссылку на ноду.

В чем будет принципиальное отличие если записать так:

Можно передавать только ссылку на ноду.

mishka · October 23, 2009

Что такое ссылка на ноду?

Просто я запутался так как ниже приведенный пример работает при клике на любой из элементов, а передается в трех случаях ссылка на имгу по разному

<!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">
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	input,img{display:block;}
	-->
	</style>
	<script type="text/javascript">
	<!--
	function sizeToggle(img){
		if(!img.flag){
			_width=img.width;
			_height=img.height;
			img.width=_width*2;
			img.height=_height;
			img.flag=true;
		}else{
			img.width=_width;
			img.height=_height;
			img.flag=false;
		}
	}
	//-->
	</script>
</head>
<body>
<div id="wrapper">
	<img id="img" src="../autumn.gif" alt="" onclick="sizeToggle(this)" />
	<input type="button" value="Button" onclick="sizeToggle(document.getElementById('img'))" />
	<input type="button" value="Button" onclick="sizeToggle(document.images[0])" />
</div>
</body>
</html>

P.S. меняю только ширину для удобства кликания по кнопочкам.

Разобрался:

<!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">
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	<!--
	input,img{display:block;}
	-->
	</style>
	<script type="text/javascript">
	<!--
	function sizeToggle(i){
		var img=typeof i=='string'?document.getElementById(i):i;

		if(!img.flag){
			_width=img.width;
			_height=img.height;
			img.width=_width*2;
			img.height=_height;
			img.flag=true;
		}else{
			img.width=_width;
			img.height=_height;
			img.flag=false;
		}
	}
	//-->
	</script>
</head>
<body>
<div id="wrapper">
	<img id="img" src="../autumn.gif" alt="" onclick="sizeToggle(this)" />
	<input type="button" value="Button" onclick="sizeToggle(document.getElementById('img'))" />
	<input type="button" value="Button" onclick="sizeToggle(document.images[0])" />
	<input type="button" value="Button" onclick="sizeToggle('img')" />
</div>
</body>
</html>

Так можна указывать само название айдишника, спасибо :angry:

Edited October 23, 2009 by mishka2

psywalker · October 24, 2009

s0rr0w

В общем я с утра сегодня разбираюсь, хочу тебе спасибо сказать за пояснения, давай я сейчас тогда отпишу всё по твоим пунктак, как я понял ситуацию, а ты меня поправь, если я где-то не прав.

1) Тоесть как я понимаю у нас имеется функция под названием "test" и она вызывается при нажатии на ссылку, засчёт вот этой записи "onclick="test(document.getElementById('img'))""

2) Теперь насчёт "НОДА", как я понял на твоём примере, это типа:

imgNode - это пациенты, а Саша, Маша, Даша. - это свойства этого пациента?

Тоесть к какому бы мы свойству элемента не захотели бы обратиться в этой функции, все ихние объекты будут называться imgNode?

И вообще что такое "Нод"?

3)

Если у картинки нет свойства oldWidth, то мы его присвоим.

А откуда вообще оно взялось и почему это свойство мы не прописали картинке?

Просто я думал, что к свойствам относятся только настоящие свойства, типа ширина, высота и т. д., а не придуманные?

4) Ну и наконец сам пример, у меня получилось прописать ширину при клике, а обратного действия по ссылке опять не происходит

		<script language="javascript">
		function test(imgNode){
				if ( !imgNode.oldWidth ) { imgNode.oldWidth = imgNode.width; imgNode.oldHeight = imgNode.height; }
				imgNode.ticked = !imgNode.ticked;
				var w = ( imgNode.ticked )? 200 : imgNode.oldWidth;
				var h = ( imgNode.ticked )? 150 : imgNode.oldHeight;
				imgNode.width = 400;
				imgNode.height = 400;
		}

</script>

<a href="#" onclick="test(document.getElementById('img'))">Сылка модная</a>

<img src="snoop.gif" id="img" alt="" >

s0rr0w · October 24, 2009

1) Тоесть как я понимаю у нас имеется функция под названием "test" и она вызывается при нажатии на ссылку, засчёт вот этой записи "onclick="test(document.getElementById('img'))""

Да.

2) Теперь насчёт "НОДА", как я понял на твоём примере, это типа:
imgNode - это пациенты, а Саша, Маша, Даша. - это свойства этого пациента?
Тоесть к какому бы мы свойству элемента не захотели бы обратиться в этой функции, все ихние объекты будут называться imgNode?
И вообще что такое "Нод"?

Нода женского рода. Нодой называют элемент HTML с точки зрения DOM. Все в HTML является нодами: теги, текст, комментарии, декларация доктайпа...

imgNode - название, которое используется в функции для определения параметра. У нас есть человек. Для врача любой человек носит название "пациент". Но человек от этого не становится меньше человеком, да и для других людей он не является пациентом, а является сыном, другом, братом, сватом... Объект не меняет сути, меняется его именование в зависимости от обстоятельств.

Теперь про свойства.

Есть братья Саша и Миша.

Это два человека, одно из свойств которых - имя. Для Саши, чтобы потрогать руку Миши нужно обратиться следующим образом: Миша.рука.

Для Миши будет Саша.рука.

А для доктора будет

пациент.рука и для Миши и для Саши.

А откуда вообще оно взялось и почему это свойство мы не прописали картинке?
Просто я думал, что к свойствам относятся только настоящие свойства, типа ширина, высота и т. д., а не придуманные?

Для JS нет разницы между придуманными и реальными свойствами.

4) Ну и наконец сам пример, у меня получилось прописать ширину при клике, а обратного действия по ссылке опять не происходит
				imgNode.width = 400;
				imgNode.height = 400;

Вот этими строчками ты в любом случае присваиваешь ширину 400.

Это равнозначно такому примерно действию: Если придет Маша, то мы пойдем гулять. Если не придет - то я пойду спать. Пошел спать.

Sign In

Обратное действие по клику

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information