使用jQuery切换单个Div层

Question

在运行时，我有一个循环，根据数据库中的数字创建一些具有相同类名的 div。

<div class="show">....</div> 
<div class="show">....</div>  
<div class="show">....</div>  

我想使用 jQuery 的 slideToggle() 函数显示这个

。对于每一个，我都有一个单独的超链接，当被点击时应该显示

。此外，在超链接和

之间有一些标签，我想要切换它们。

<div>
<div>
<a href="#" class="display">View</a>  

</div>
    <br />
    </div>
    <div>
        <div class="clear"></div>
      </div>


<div class="show">....</div>

<div>
<div>    
<a href="#" class="display">View</a>  
</div>
    <br />
    </div>
    <div>
        <div class="clear"></div>
      </div>



<div class="show">....</div> 

<div>
<div>
<a href="#" class="display">View</a>  

</div>
    <br />
    </div>
    <div>
        <div class="clear"></div>
      </div>


<div class="show">....</div>   

$(function () {    
     $(".display").click(function(){    
         $(".show").slideToggle();    
         return false;     
      });  
});

自然地，每次调用时都会切换所有div层，无论点击哪个超链接。我只想切换最接近给定超链接的div。

提前感谢。

- Barry

Answer 1

通过使用树遍历函数，从this出发来相对地查找<div>元素，就像这样：

$(function () {
  $(".display").click(function () {
    $(this).next().slideToggle();
    return false;
  });
});

在这种情况下，由于我们关心的是下一个兄弟元素，所以使用.next()，如果结构与问题不同，您需要相应地进行调整，从您单击的<a>获取（this）到您想要切换的<div>。

- Nick Craver

---

实际上，如果中间有其他内容，使用.next("div")更安全。@Barry - 如果您愿意，可以在此处进行测试：http://jsfiddle.net/zDgQ2/ - Shadow The Spring Wizard

@Shadow - 如果中间有其他元素，.next("div") 将不起作用，.next() 会查找下一个兄弟元素 如果 它匹配选择器，而不是一直查找到匹配选择器为止，你需要使用 .nextAll("div:first") 来实现这个功能 :) - Nick Craver

@Nick - 抱歉，我不知道.. 我自己也是jQuery的新手，还在学习中。感谢你澄清了这一点。 :-) - Shadow The Spring Wizard

嗨，感谢回复。我刚刚编辑了一下，以显示超链接和 div 之间的实际标签。谢谢。 - Barry

@Barry - 请将您的代码原样粘贴，然后点击 010101 按钮将其缩进4个空格，这样可以使您的代码格式更加清晰易读...现在我无法确定您的结构是什么样子的。 - Nick Craver

Answer 2

$(function () {
  $(".display").click(function () {
  $(this).next.(".show").slideToggle();
  return false;
});

- benhowdle89

Answer 3

或者在循环创建div时，您可以添加（例如）一个rel值，每次递增1？这样就可以得到类似于以下内容的东西...

<a href="#" class="display" rel="1">View</a>
<div class="show" rel="1">....</div>
<a href="#" class="display" rel="2">View</a>
<div class="show" rel="2">....</div>
<a href="#" class="display" rel="3">View</a>
<div class="show" rel="3">....</div>

这样就可以链接这两个 div，以便您可以获取所单击元素的 rel 值并使用该值来识别显示/隐藏的 div。

<script type="text/javascript">
$(function () {
$(".display").click(function () {
var element_id = $(this).attr('rel');
$(".show").attr('rel', element_id).slideToggle();
return false;
});
});

- Scoop