当单击链接时，jQuery代码会使特定类的所有div切换

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

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

这段代码在我按下任何链接时切换所有名为tracklist的div。不太好

我需要找到一种方法来确保每个链接只影响一个tracklist 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>

试一试

试一试

---

您可以向链接添加与曲目列表id匹配的rel属性

例如：

<div class="tracklist" id="track-1"></div>
<div class="tracklist" id="track-2"></div>
<div class="tracklist" id="track-3"></div>

<a href="#" class="link" rel="1">Show 1</a>
<a href="#" class="link" rel="2">Show 2</a>
<a href="#" class="link" rel="3">Show 3</a>

<script>
$("a.link").click(function(){
  var el = $(this);
  $("div.tracklist#track-" + el.attr("rel")).show();
});
</script>

---

您可以向链接添加与曲目列表id匹配的rel属性

例如：

<div class="tracklist" id="track-1"></div>
<div class="tracklist" id="track-2"></div>
<div class="tracklist" id="track-3"></div>

<a href="#" class="link" rel="1">Show 1</a>
<a href="#" class="link" rel="2">Show 2</a>
<a href="#" class="link" rel="3">Show 3</a>

<script>
$("a.link").click(function(){
  var el = $(this);
  $("div.tracklist#track-" + el.attr("rel")).show();
});
</script>

固定的：

现在它可以正常工作了：感谢@Loktar，他让我在90%的时间里完成了修复：

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

---

现在它可以工作了：感谢@Loktar让我90%的时间都在那里

ps-我使用一个类，因为我的页面上有多个它的实例，因此不能使用ID。你可以使用它发布标记吗？ps-我使用一个类，因为我的页面上有多个它的实例，因此不能使用ID。你可以发布你的标记吗使用？这应该行得通，因为jQuery安排它将引用作为事件目标的元素。将跟踪列表放在链接中是否明智？很好，@Briedis-将标记放在标记体中是无效的标记！嗨，loktar-我喜欢这个想法，并更新了我的帖子，加入了我的标记，但正如前面提到的，我的轨迹列表不在我的div中。是的，我也在想同样的事情，关于锚中的div，但那是在标记发布之前，所以这是一种暗中拍摄：p这应该有效，因为jQuery安排这将引用作为事件目标的元素。将跟踪列表放在链接中是否明智？好的观点，@Briedis-将标记放在标记体中是无效的标记！嗨，洛克塔-我喜欢这个想法，并更新了我的帖子，加入了我的标记，但正如前面提到的，我的跟踪列表不在我的分区内。是的，我也在想同样的事情，关于锚中的div，但那是在标记发布之前，所以这有点像是在黑暗中拍摄的：PI非常喜欢这个想法-很好-我会试试看我从中得到了什么谢谢我非常喜欢这个想法-很好-我会试试看我从中得到了什么谢谢