Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.05.2013, 11:46
Интересующийся
Отправить личное сообщение для X-man Посмотреть профиль Найти все сообщения от X-man
 
Регистрация: 23.05.2013
Сообщений: 20

Миниигра "Найди карту".
Добрый день.
Делаю что-то типа игрушки "Найди карту". Выкладываю на стол 4 карты(картинки во вложении), вешаю на каждую событие, по которому вызывается функция обращения к соответствующей карте.
<style type="text/css">
img
{
	margin:30px 5px;
	cursor:pointer;
	border-radius:5px;
}
div
{
	background-color:#999;
}
</style>
<script type="text/javascript">
<!--
var cards= new Array("11.png","12.png","13.png","14.png","rub.png");
function opencard(num)
{
	var img=document.getElementsByTagName("IMG")[num];
	window.alert(num);
	img.src=cards[num];
}
window.onload=function() 
{
	var img=document.getElementsByTagName("IMG")
	for (var i=0; i<img.length;i++)
	{
		img[i].src=cards[img.length];
        img[i].onclick=opencard(i);

	}
}
//-->
</script>

<div align="center">
<img />
<img />
<img />
<img /><br>

</div>

Проблема в том что у меня карты переворачиваются не по клику а при загрузки страницы. Это связано с использованием img[i].onclick=opencard(i);. Как правильно задать события для каждой карты?
Вложения:
Тип файла: zip img.zip (8.9 Кб, 2 просмотров)

Последний раз редактировалось X-man, 24.05.2013 в 14:37.
Ответить с цитированием
  #2 (permalink)  
Старый 24.05.2013, 15:21
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Оно?

<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function() {
	var o=document.getElementsByTagName("button")
	for (var i=0; i<o.length;i++)	{
        o[i].onclick=(function (N) {
			return function (){alert(N);}
		})(i);
	};
};
</script>
</head>
<body>
<button>0</button>
<button>1</button>
<button>2</button>
</body>
</html>

Последний раз редактировалось ksa, 24.05.2013 в 15:26.
Ответить с цитированием
  #3 (permalink)  
Старый 24.05.2013, 16:46
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

ksa, wtf?
про http://learn.javascript.ru/bubbling-and-capturing не слышал?

X-man,
не смог спокойно смотреть на код ТС ...
http://learn.javascript.ru/play/XHLNic
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #4 (permalink)  
Старый 24.05.2013, 16:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,225

Сообщение от cyber
ksa, wtf?
про http://learn.javascript.ru/bubbling-and-capturing не слышал?
Дальше что?
Ответить с цитированием
  #5 (permalink)  
Старый 24.05.2013, 16:59
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

ksa, нечего, просто показал косяк, если хочешь можешь по танцевать )
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #6 (permalink)  
Старый 24.05.2013, 17:01
Интересующийся
Отправить личное сообщение для X-man Посмотреть профиль Найти все сообщения от X-man
 
Регистрация: 23.05.2013
Сообщений: 20

ksa, спасибо! Работает.

Последний раз редактировалось X-man, 24.05.2013 в 18:17.
Ответить с цитированием
  #7 (permalink)  
Старый 24.05.2013, 17:03
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

ksa, ладно ты победил, ТС за кривой код)
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #8 (permalink)  
Старый 24.05.2013, 17:09
Интересующийся
Отправить личное сообщение для X-man Посмотреть профиль Найти все сообщения от X-man
 
Регистрация: 23.05.2013
Сообщений: 20

cyber, спс за способ и за инфу!
Первый раз на js пишу.

Последний раз редактировалось X-man, 24.05.2013 в 17:25.
Ответить с цитированием
  #9 (permalink)  
Старый 25.05.2013, 13:23
Интересующийся
Отправить личное сообщение для X-man Посмотреть профиль Найти все сообщения от X-man
 
Регистрация: 23.05.2013
Сообщений: 20

Сообщение от cyber Посмотреть сообщение
http://learn.javascript.ru/play/XHLNic
cyber, '!function' равнозначно window.onload=function()?
И подскажи плз, почему работает только если div container идет перед скриптом в body, а при другом расположении(если перенести скрипт в head или поменять местами с div) грузится пустая страница?
Ответить с цитированием
  #10 (permalink)  
Старый 25.05.2013, 13:39
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,588

X-man, потому что скрип выполняется сразу, как загружен. И если див ниже кода, то на момент выполнения его какбэ ещё нет.
Как раз для таких случаев исползуется "window.onload=function(){" (окно.когдаЗагрузится - запустить функицю).

!function - извращённый способ запустить функцию сразу после создания.
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Миниигра "Найди карту". X-man Элементы интерфейса 0 24.05.2013 11:43