Здравствуйте!
Никак не могу сообразить как написать условие для следующей структуры.
<!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
Я не прошу решить эту задачу за меня, просто подскажите метод или пошаговую реализацию, попробую сам сделать.