要切換的元素越多，但我只想切換我點擊的元素

Question

現在當我點擊一個table a ，我想切換.info同一div內，按下該鍵則.info在其他的div了。 有人能幫幫我嗎？

 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

 $('.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> 

Answer 2

問題是因為您在調用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>