Как по нажатию показать блок с определенным атрибутом?

336

29 марта 2017, 17:17

Всем привет, есть такой код, хочу реализовать чтобы по нажатию на com_review всплывал блок otpr, но дело в том что таких блоков много и поэтому работает только на первом, как реализовать чтобы функция работала и на последующих блоках

$(document).ready(function() { 
  $('#com_review').click(function() { 
    var ig = $(this).attr("com"); 
    $('div[atpr="' + ig + '"]').show(); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="text_kom_zav"> 
  <textarea id="com_review" com="1" class="text_kom_yts" placeholder="Написать комментарий"></textarea> 
</div> 
<div id="otpr" atpr="1" style="display:none;">fffffff</div> 
<div class="text_kom_zav"> 
  <textarea id="com_review" com="2" class="text_kom_yts" placeholder="Написать комментарий"></textarea> 
</div> 
<div id="otpr" atpr="2" style="display:none;">fffffff</div>

Answer 1

Ваша ошибка: id у элементов должен быть уникален. Когда вы присваиваете многим элементам одно id, то JQuery обращается к первому.

Чтобы обратиться ко всем, нужно присваивать событие по классу.

$(document).ready(function() { 
  $('.text_kom_yts').click(function() { 
    var ig = $(this).attr("com"); 
    $('div[atpr="' + ig + '"]').show(); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="text_kom_zav"> 
  <textarea id="com_review0" com="1" class="text_kom_yts" placeholder="Написать комментарий"></textarea> 
</div> 
<div id="otpr0" atpr="1" style="display:none;">fffffff</div> 
<div class="text_kom_zav"> 
  <textarea id="com_review1" com="2" class="text_kom_yts" placeholder="Написать комментарий"></textarea> 
</div> 
<div id="otpr1" atpr="2" style="display:none;">fffffff</div>