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

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

Answer 1

试

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

Answer 2

您可以将链接的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>

Answer 3

修正：

$(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％的方式

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

修改

3 个答案: