如何在javascript中切换特定的div

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

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