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。不好。

我需要找到一种方法来确保每个链接只影响一个tracklistdiv

Edit

我的标记-下面的代码在每页上显示多次：

<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).closest( .podcast ).children( .tracklist ).toggle( slide , {easing:  easeOutQuint , direction:  down }, 1000);
       return false;
    });
});

现在它成功了：）感谢@Loktar，他让我成功了90%

Answer 2

尝试

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

Answer 3

您可以向链接添加一个rel属性，该属性与轨迹列表id相匹配。

例如：

<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>

Edit

友情链接