Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2011, 13:59
Интересующийся
Отправить личное сообщение для oke11o Посмотреть профиль Найти все сообщения от oke11o
 
Регистрация: 02.09.2011
Сообщений: 22

Помогите новичку написать обработчик.
Здравствуйте, хочу написать обработчик onclick.
структура ссылки такия:
<a id="test-link" href="#cn-menu-light-overlay">
	<h4>закуска</h4>
	<div class="cn-menu-object" style="display: none;">
		<h4>закуска</h4>
		<img src="images/menu_object.jpg"></img>
		<ul>
			<li><span>Цена:</span>300 руб</li>
			<li><span>Порция:</span>300 г</li>
			<li><span>Калории:</span>300 кал</li>
			<li><span>Состав:</span>Мука, вода, рис, курица, яйцо, сахар, специи. Все переммешать и выкинуть.</li>
		</ul>
	</div>
</a>


Как обратится к элементам (div, h4, img, ul) из обработчика?
Пытался так:
function showLightBlock(eventObj){
	eventObj.preventDefault();
	console.log($(this).$('div'));
	return false;
}

это неправильно. Подскажите как.
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2011, 14:05
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от oke11o
Как обратится к элементам (div, h4, img, ul) из обработчика?
На какой элемент ты его повесил?
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2011, 14:07
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от oke11o
структура ссылки такия:
Фиговия твоя структура... Блочные элементы совать в строчный не валидно...
Ответить с цитированием
  #4 (permalink)  
Старый 02.09.2011, 14:17
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от oke11o
Как обратится к элементам (div, h4, img, ul)
Пример...

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
function Go() {
	var o=document.getElementById('test-link')
	alert(o.getElementsByTagName('div')[0].className)
	alert(o.getElementsByTagName('h4')[0].innerHTML)
	alert(o.getElementsByTagName('img')[0].src)
	alert(o.getElementsByTagName('ul')[0].getElementsByTagName('li').length)
}
</script>
</head>
<body onload='Go()'>
<a id="test-link" href="#cn-menu-light-overlay">
	<h4>закуска</h4>
	<div class="cn-menu-object" style="display: none;">
		<h4>закуска</h4>
		<img src="images/menu_object.jpg"></img>
		<ul>
			<li><span>Цена:</span>300 руб</li>
			<li><span>Порция:</span>300 г</li>
			<li><span>Калории:</span>300 кал</li>
			<li><span>Состав:</span>Мука, вода, рис, курица, яйцо, сахар, специи. Все переммешать и выкинуть.</li>
		</ul>
	</div>
</a>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 02.09.2011, 14:28
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

Сообщение от oke11o
$(this).$('div')


Можно так:
$(this).find('div');
// Или так
$('div', this);
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #6 (permalink)  
Старый 02.09.2011, 14:30
Интересующийся
Отправить личное сообщение для oke11o Посмотреть профиль Найти все сообщения от oke11o
 
Регистрация: 02.09.2011
Сообщений: 22

ясно. А как решить вопрос с валидацией? Вместо a можно сделать div и повесить на него обработчик onclick. Но еще надо чтобы при наводе на div менялся курсор (как по-умолчанию на ссылке).
Ответить с цитированием
  #7 (permalink)  
Старый 02.09.2011, 14:32
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

div {
   cursor: pointer;
}
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #8 (permalink)  
Старый 02.09.2011, 14:54
Интересующийся
Отправить личное сообщение для oke11o Посмотреть профиль Найти все сообщения от oke11o
 
Регистрация: 02.09.2011
Сообщений: 22

Огромное спасибо. Процесс пошел.
А можно уточнить как это работает.
Сообщение от walik Посмотреть сообщение
$('div', this);

Последний раз редактировалось oke11o, 02.09.2011 в 15:21.
Ответить с цитированием
  #9 (permalink)  
Старый 02.09.2011, 15:22
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от oke11o
А как решить вопрос с валидацией?
Например заменить все блочные элементы на строчные...
Ответить с цитированием
  #10 (permalink)  
Старый 02.09.2011, 15:40
Интересующийся
Отправить личное сообщение для oke11o Посмотреть профиль Найти все сообщения от oke11o
 
Регистрация: 02.09.2011
Сообщений: 22

Я наоборот все в дивы обернул.
Но теперь другая проблема. Мой обработчик должен брать div блок, у которого display: none, и вставлять его в другой div блок (у которого настроены стили, и который находится в нужном мне месте). Так вот после первого клика все получается нормально. При втором клике ничего не отображается. Как будто опять свойство display: none.
<div id="cn-menu-light-overlay">
	<div id="cn-menu-light-block">
	</div>
</div>
<div class="test-link">
	<h4>закуска</h4>
	<div class="cn-menu-object" style="display: none;">
		<h4>чтобы это могло быть?</h4>
		<img src="images/menu_object.jpg"></img>
		<ul>
			<li><span>Цена:</span>300 руб</li>
			<li><span>Порция:</span>300 г</li>
			<li><span>Калории:</span>300 кал</li>
			<li><span>Состав:</span>Мука, вода, рис, курица, яйцо, сахар, специи. Все переммешать и выкинуть.</li>
		</ul>
	</div>
</div>

$(document).ready(function(){
		$('div:.test-link').bind('click', showLightBlock);
		$('div:#cn-menu-light-overlay').bind('click', hideLightBlock);
	});

function showLightBlock(eventObj)
{
	var block = $('div:#cn-menu-light-overlay div#cn-menu-light-block');
	block.html($('div', this));
	block.find('div').css('display', 'block');;
	$('div:#cn-menu-light-overlay').css('display', 'block');
}

function hideLightBlock()
{
	$('div:#cn-menu-light-overlay').css('display', 'none');;

}

#cn-menu-light-overlay img { border: none; }
#cn-menu-light-overlay {	display: none;	
						position: absolute;
						top : 0;
						left : 0;
						z-index : 90;
						height : 1500px;
					 	width : 100%;
						background-image: url(../i/overlay.png); 
						}
* html #cn-menu-light-overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../i/overlay", sizingMethod="scale");
	}
#cn-menu-light-block {		
						position: absolute;
						top : 100px;
						left : 480px;
						z-index : 100;
						height : 400px;
					 	width : 400px;
						background-color: #FFF; 
						}
.test-link:hover { cursor: pointer;}
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите написать скрипт !!! Zander Элементы интерфейса 10 19.01.2012 14:40
Помогите плисс написать скрипт Gnusmus Events/DOM/Window 6 17.08.2011 15:51
Генератор случайных чисел. Помогите написать. Teenager Я не знаю javascript 5 05.01.2011 19:15
Помогите новичку с выпадающим списком interest Элементы интерфейса 5 19.05.2010 13:15
помогите написать аналог строки include("index.php?open=1") на js bushstas Общие вопросы Javascript 1 19.07.2009 02:48