How to choose a block with the same id?

Question

Hello. Yes, I read that you can not use the same id. But I will explain the essence of my task.

I have generated 10, 20, 30 blocks with the same id (can be done with the class). I want that when I click on the button next to it, the necessary block will open. In my case, opens only the first. And if you write the same thing through class, then everything opens at once. How to do what would choose the block that I need.? Below is the code

HTML

<div class="shop_info">Показать</div> <div class="show_shop_info">Cдесь информация которая должна показываться</div> <div class="shop_info">Показать</div> <div class="show_shop_info">Cдесь информация которая должна показываться1</div> <div class="shop_info">Показать</div> <div class="show_shop_info">Cдесь информация которая должна показываться2</div>

Jquery

 $(document).ready(function () { var i=0; $('.shop_info').click(function() { if (i==0) { $('.show_shop_info').slideToggle('slow'); $('.shop_info').text('Спрятать'); i=1; } else { if (i==1) { $('.show_shop_info').slideToggle('slow'); $('.shop_info').text('Показать'); i=0; } } }); });

> C here in the handler function, the element to which the event relates is available as this .
This is the raw element and to get a jQuery object you need to create it: $ ('. Shop_info'). On ('click', function () {var $ this = $ (this); $ this.text ('Hide '); $ this.next ('. show_shop_info '). slideToggle (' slow ');});
Probably the method chain looks simpler: $ (this) .text ('Hide'). Next (). SlideToggle ('slow');
it's like the number of the bill, or passport or other identifier

Answer 1 · 2015-11-29T23:16:13

 $(document).on('click', '.shop_info', function () { var $this = $(this), $next = $this.next(); $this.text($next.is(':visible') ? "Показать" : "Скрыть"); $next.toggle('slow') });

 .shop_info { cursor: pointer; } .show_shop_info { display: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="shop_info">Показать</div> <div class="show_shop_info">Здесь информация которая должна показываться</div> <div class="shop_info">Показать</div> <div class="show_shop_info">Здесь информация которая должна показываться1</div> <div class="shop_info">Показать</div> <div class="show_shop_info">Здесь информация которая должна показываться2</div>

Answer 2 · 2014-06-24T15:42:34

  <style type="text/css"> .hide { display: none; } </style> <div id="btn_info_1">Показать</div> <div id="block_info_1 hide">Cдесь информация которая должна показываться</div> <div id="btn_info_2">Показать</div> <div id="block_info_2 hide">Cдесь информация которая должна показываться</div> <div id="btn_info_3">Показать</div> <div id="block_info_3 hide">Cдесь информация которая должна показываться</div> <script type="text/javascript"> $(document).ready(function () { $('[id ^= "btn_info"]').click(function(){ var id = $(this).attr('id'); var number_id = id.split('_'); number_id = number_id[number_id.length -1]; $('#block_info_'+ number_id).removeClass('hide'); }); }); </script>

@ruslik, how can I tell you this? ... They say ( although it may be rumored ) that programmers in India are paid or paid for the amount of written code.
Therefore, the robot publisher saw nothing surprising in this type of “masterpieces”: var x = false;
if (x === 0) {// Do 1 ....} else if (x! = 0) {// Do 2 .....} else {if (typeof x == 'boolean' && ( x === false ||! x)) {// And here is clean money :)}} Your solution to the task is somewhere on the verge of it.
Yes, I understand, thanks for the advice, we learn, but there are 3 but: First, this is what my code will work if I change the structure of the document, for example, add another block between a pair of blocks or even spread out blocks in different places, and secondly if id change is valid from block_info_1 to info_1, then only the id will need to be changed.

How to choose a block with the same id?

2 answers 2

More articles: