如何在javascript中切换特定的div答案

【问题标题】：how to toggle a specific div in javascript如何在javascript中切换特定的div
【发布时间】：2018-11-04 05:08:32
【问题描述】：

我的 Rails 视图中有动态数据，所有 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>

【问题讨论】：

标签： javascript jquery css-selectors

【解决方案1】：

您的closest 呼叫在正确的轨道上，但您没有完全正确地使用它。首先，您要找到包含您的<div class="show"> 的容器（.eachData），为此您使用closest：

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

然后您在该container 中搜索您想要使用find 切换的.allData：

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

所以你使用closest 上到节点树，然后find 下来。

顺便说一句，这个：

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

应该是：

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

class 属性包含由空格分隔的 CSS 类名称，原始 CSS 位于 style 属性中并由分号分隔。

【讨论】：

【解决方案2】：

你在 div 上的内联样式应该如下：

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

然后尝试以下操作：

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

【讨论】：