jQuery 代码导致特定类的所有 div 在单击链接时切换

Question

我有一些 jquery 代码，可以在单击链接时显示和隐藏 div。

$(document).ready(function() {
  $(".tracklist").hide();
  $('.link').bind('click', function(e) {
    $('.tracklist').toggle('slide', {easing: 'easeOutQuint', direction: 'down'}, 1000);
    return false;
  });
});

当我按下任何链接时，此代码会切换所有名为 tracklist 的 div。不好。

我需要找到一种方法来确保每个链接仅影响一个轨道列表 div

编辑

我的标记 - 下面的代码在每个页面上出现多次:

<article class="podcast">
  <ul class="buttons">
    <li>
      <a class="link" href=>"#">Tracklist</a>
    </li>
    // other links removed 
  </ul>

  <div class="tracklist">
    Content that I want to toggle
  </div>
</article>

Answer 1

尝试

$(document).ready(function() {
    $(".tracklist").hide();
    $('.link').bind('click', function(e) {
       $(this).children('.tracklist').toggle('slide', {easing: 'easeOutQuint', direction: 'down'}, 1000);
    return false;
 });
});