Question

我在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>

Answer 1

您的closest通话是在正确的轨道上，但是您使用的方式不正确。首先，您要查找包含.eachData的容器（<div class="show">），为此使用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属性，并以分号分隔。

Answer 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');
});

如何在javascript中切换特定的div

2 个答案: