Форум

modestes · #1 (**permalink**) 20.02.2014, 14:45

Здравствуйте!

Никак не могу сообразить как написать условие для следующей структуры.

<!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

Я не прошу решить эту задачу за меня, просто подскажите метод или пошаговую реализацию, попробую сам сделать.

рони · #2 (**permalink**) 20.02.2014, 14:57

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>

Форум

Справочник

Discord чат

Курсы javascript