There is a list of ul with elements like li.item_1, li.item_2, etc. It is necessary when clicking on the li element to show the corresponding div.item_1, div.item_2, etc. How to implement it on jQuery?

Closed due to the fact that the essence of the question is not clear to the participants 0xdb , Jarvis_J , Mr. Black , ThisMan , Edward Jul 1 '18 at 21:01 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

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

    • In principle, this is it, but I have classes of this type: <li class = "li item_1"> </ li>, <div class = "div item_1"> </ div>. In this case, does not work - xfiveit
    • 2
      What is the difficulty of modifying my example? - user207618
    • Updated ........ - user207618