При нажатии на div, показать другой div [закрыт]

256

06 августа 2018, 03:00

Есть список ul с элементами вида li.item_1, li.item_2 и т.д. Необходимо при нажатии на элемент li показать соответствующий div.item_1, div.item_2 и т.д. Как это реализовать на Jquery?

Answer 1

$('ul').on('click', '.li', function(e) { 
  let $this = $(this); 
 
  $(`.div.${$this.attr('class').split(/\s+/).filter(_ => _.startsWith('item_'))[0]}`).css({ 
    display: 'block' 
  }); 
});

li { 
  cursor: pointer; 
} 
 
div { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
  <li class="li item_1">LI #01</li> 
  <li class="li item_2">LI #02</li> 
  <li class="li item_3">LI #03</li> 
  <li class="li item_4">LI #04</li> 
  <li class="li item_5">LI #05</li> 
</ul> 
<div class="div item_1">DIV #01</div> 
<div class="div item_2">DIV #02</div> 
<div class="div item_3">DIV #03</div> 
<div class="div item_4">DIV #04</div> 
<div class="div item_5">DIV #05</div>