トグルする要素が増えましたが、私はクリックしたものだけを切り替えたい

Question

table aをクリックすると、同じdiv内の.infoを切り替えると、他のdivの.infoもトグルします。誰か助けてくれますか？

function info() { 
 
    $('.table a').click(function() { 
 
    $('.info').toggle(); 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="table"> 
 
    <a class="table-row" title="mehr &darr;"> 
 
     <div class="table-cell l"> 
 
     19:30 
 
     </div> 
 
     <div class="table-cell"> 
 
     Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
     </div> 
 
     <div class="table-cell r"> 
 
     Experimentiertheater 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="info"> 
 
    <h1>test</h1> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div class="table"> 
 
    <a class="table-row" title="mehr &darr;"> 
 
     <div class="table-cell l"> 
 
     19:30 
 
     </div> 
 
     <div class="table-cell"> 
 
     Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
     </div> 
 
     <div class="table-cell r"> 
 
     Experimentiertheater 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="info"> 
 
    <h1>test</h1> 
 
    </div> 
 
</div>

Answer 1

あなたがtoggle()を呼び出す前に、すべての.info要素を選択しているので問題があります。代わりに、クリックされたaに関連するものを見つける必要があります。これを行うには、クリックハンドラ内でthisキーワードを使用してDOMを走査し、親.table、次に次の兄弟.infoを取得します。

function info() { 
 
    $('.table a').click(function() { 
 
    $(this).closest('.table').next('.info').toggle(); 
 
    }); 
 
} 
 

 
info();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="table"> 
 
    <a class="table-row" title="mehr &darr;"> 
 
     <div class="table-cell l"> 
 
     19:30 
 
     </div> 
 
     <div class="table-cell"> 
 
     Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
     </div> 
 
     <div class="table-cell r"> 
 
     Experimentiertheater 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="info"> 
 
    <h1>test</h1> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div class="table"> 
 
    <a class="table-row" title="mehr &darr;"> 
 
     <div class="table-cell l"> 
 
     19:30 
 
     </div> 
 
     <div class="table-cell"> 
 
     Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
     </div> 
 
     <div class="table-cell r"> 
 
     Experimentiertheater 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="info"> 
 
    <h1>test</h1> 
 
    </div> 
 
</div>

Answer 2

$('.table a').click(function() { 
 
    $(this).parent('.table').next('.info').toggle(); 
 
});

.info { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <div class="table"> 
 
     <a class="table-row" title="mehr &darr;"> 
 
      <div class="table-cell l"> 
 
       19:30 
 
      </div> 
 
      <div class="table-cell"> 
 
       Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
      </div> 
 
      <div class="table-cell r"> 
 
       Experimentiertheater 
 
      </div> 
 
     </a> 
 
    </div> 
 
    <div class="info"> 
 
     <h1>test</h1> 
 
    </div> 
 
</div> 
 
<div> 
 
    <div class="table"> 
 
     <a class="table-row" title="mehr &darr;"> 
 
      <div class="table-cell l"> 
 
       19:30 
 
      </div> 
 
      <div class="table-cell"> 
 
       Eröffnung + <b>Nwabis Plaatjie</b>: 3 Years, a month and 7 days 
 
      </div> 
 
      <div class="table-cell r"> 
 
       Experimentiertheater 
 
      </div> 
 
     </a> 
 
    </div> 
 
    <div class="info"> 
 
     <h1>test</h1> 
 
    </div> 
 
</div>