как переключить определенный div в JavaScript

Question

у меня есть динамические данные в моем представлении rails, все div имеют одинаковое имя; 'allData', которая имеет много информации, поэтому у меня она не отображается, я хочу отображать этот конкретный div, а не все div, когда я нажимаю show, но он показывает все div, я хочу иметь возможность показывать только этот целевой div я нажал

  $('.show'').on('click', (event) =>{ 
        $('.allData').toggle();
        $(event.currentTarget).closest('.allData').toggle(); 
    })

<div class='eachData'>
  <div class='header'>
    <div class='show'> show</div>
    <div class='numberOfdata'> 100</div>
  </div>  
  <div class='allData; display:none'>
    "foobar all data is here"
  </div>
</div>
<div class='eachData'>
  .......
</div>
<div class='eachData'>
  .......
</div>

Answer 1

Ваш встроенный стиль в div должен быть следующим:

<div class="allData" style="display: none">

Тогда попробуйте следующее:

$('.show').on('click', function() {
    $(document).find('.eachData .allData:visible').hide('fast');
    $(this).parent().closest('.allData').show('fast');
});

Answer 2

Ваш closest звонок находится на правильном пути, но вы не совсем правильно его используете. Сначала вы хотите найти контейнер (.eachData), который содержит ваш <div class="show">, для этого вы используете closest:

let container = $(event.currentTarget).closest('.eachData');

затем вы ищете в этом container значение .allData, которое вы хотите переключить, используя find:

container.find('.allData').toggle();

Таким образом, вы используете closest, чтобы пройти вверх по дереву узлов, а затем find, чтобы вернуться вниз.

---

Кстати, это:

<div class='allData; display:none'>

должно быть:

<div class="allData" style="display: none">

Атрибут class содержит имена классов CSS, разделенные пробелами, необработанный CSS входит в атрибут style и отделяется точкой с запятой.