Написание условия
Здравствуйте!
Никак не могу сообразить как написать условие для следующей структуры.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
<style>
#wrap {
margin-bottom: 30px;
}
.block {
display: none;
}
</style>
<script>
$(document).ready( function() {
$('#wrap').on('click', ".item", function(){
var elemAtr = $(this).attr('data-floor');
alert('Элемент ' + elemAtr);
});
}); // end ready
</script>
<div id="wrap">
<div class="item" data-floor="1">Элемент 1</div>
<div class="item" data-floor="2">Элемент 2</div>
<div class="item" data-floor="3">Элемент 3</div>
</div>
<!--Изначально скрытые блоки-->
<div class="block" data-floor-plan="1">Блок 1</div>
<div class="block" data-floor-plan="2">Блок 2</div>
<div class="block" data-floor-plan="3">Блок 3</div>
</body>
</html>
Нужно чтобы при клике например на "Элемент 1" показывался "Блок 1" и так далее. Как правильно написать такое условие? Первая мысль это сверять каждый элемент отдельно, но мне кажется что есть более правильное решение, поэтому обращаюсь к вам за помощью. Песочница http://learn.javascript.ru/play/pdWgP Я не прошу решить эту задачу за меня, просто подскажите метод или пошаговую реализацию, попробую сам сделать. |
modestes,
var elemAtr = $(this).data('floor');
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<style>
#wrap {
margin-bottom: 30px;
}
.block {
display: none;
}
.item{
cursor: pointer;
}
</style>
<script>
$(document).ready( function() {
$('#wrap').on('click', ".item", function(){
var indx = $(".item").index(this),
el = $(".block").eq(indx);
el.slideToggle()
$(".block").not(el).slideUp();
});
});
</script>
</head>
<body>
<div id="wrap">
<div class="item" data-floor="1">Элемент 1</div>
<div class="item" data-floor="2">Элемент 2</div>
<div class="item" data-floor="3">Элемент 3</div>
</div>
<!--Изначально скрытые блоки-->
<div class="block" data-floor-plan="1">Блок 1</div>
<div class="block" data-floor-plan="2">Блок 2</div>
<div class="block" data-floor-plan="3">Блок 3</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 00:10. |