javascript - 如何在 JavaScript 中切换特定的 div

Question

我的 Rails View 中有动态数据，所有 div 都具有相同的名称； 'allData'，其中有很多信息，所以我没有显示它，我想在单击显示时显示该特定的 div 而不是所有 div，但它显示所有 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

您的closest call 是在正确的轨道上，但你没有完全正确地使用它。首先，您要找到包含 .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 中属性并用分号分隔。