Помогите новичку написать обработчик.
Здравствуйте, хочу написать обработчик 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;
}
это неправильно. Подскажите как. |
Цитата:
|
Цитата:
|
Цитата:
<!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>
|
Цитата:
Можно так:
$(this).find('div');
// Или так
$('div', this);
|
ясно. А как решить вопрос с валидацией? Вместо a можно сделать div и повесить на него обработчик onclick. Но еще надо чтобы при наводе на div менялся курсор (как по-умолчанию на ссылке).
|
div {
cursor: pointer;
}
|
Огромное спасибо. Процесс пошел.
А можно уточнить как это работает. Цитата:
|
Цитата:
|
Я наоборот все в дивы обернул.
Но теперь другая проблема. Мой обработчик должен брать 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;}
|
| Часовой пояс GMT +3, время: 06:05. |