Question

我无法在使用Jquery的表中一次隐藏/显示1个div。我在表中有2行：第1行包含一个链接，用于在第二行内切换div（.displayMail）。这些行有很多实例，所以当我点击链接它应该只更新它下面的下一个div，但它更新所有div !! ??有人想帮助一个菜鸟吗？

这是我的表，由php生成一个while循环，其中行数根据ttl而变化。行数。

<table id="inboxTable" class="txt13" width="800px">
<tr><th style="text-decoration:underline">From</th><td width="20px"></td><th style="text-decoration:underline">Subject
    </th><td width="20px"></td>
    <th style="text-decoration:underline">Date</th><td width="20px"></td>
    <th style="text-decoration:underline">Action</th></tr>';

while($info=mysql_fetch_array($result)){
    $this->requestsMail .='
    <tr>
    <td width="100px"><a href="#" class="showMail" onClick="viewMail()">read</a></td></tr>
    <tr><td colspan="7"><div class="displayMail" style="margin:10px 120px 10px 120px" onClick="viewMail()">View Message</div></td></tr>
    ';
}

      $this->requestsMail .='</table>

在Jquery，我有这个：

    function viewMail(){
    $("a.showMail").click(function() {
        $(".displayMail").toggle(); 
        return false;
    });}

我可以获得更新所有div的链接，但我想只更新相应的div。我通过使用next（），children（），parents（）......基本上所有东西尝试了很多访问组合（“.displayMail”），但是当我点击相应的时候我仍然无法得到它。这么多小时试图让这个工作:(

Answer 1

您需要应用一些DOM遍历。

function viewMail(){
    $("a.showMail").click(function() {
        $(this).closest('tr').next().find('.displayMail').toggle();
        return false;
    });
}

只需选择.displayMail jQuery即可正确查询所有这些div。通过调用.closest('tr')^help，我们遍历DOM直到<tr>的第一个实例。在那里，我们转到下一个<tr>调用.next()^help，最后使用.find()^help搜索该节点，以获取.displayMail的正确实例。

<强>更新

我刚刚实现了你的召唤惯例。通过调用viewMail处理程序中的onclick，您每次都会绑定另一个单击处理程序。所以应该致电：

$(function() {
    $("a.showMail").click(function() {
         $(this).closest('tr').next().find('.displayMail').toggle();
         return false;
   });
});

这将绑定click事件处理程序一次。删除onclick属性。

Answer 2

function viewMail(){
    $("a.showMail").click(function() {
        $(this).parent('tr').next().find(".displayMail").toggle(); 
        return false;
    });
}

Answer 3

我会删除viewMail()函数并将jQuery更改为：

$("a.showMail").click(function() {
    $(this).closest('tr').next().find('.displayMail').toggle();
    return false;
});

$("div.displayMail").click(function() {
    $(this).toggle();
    return false;
});

Jquery：如何只访问表中的指定div

3 个答案: