2

我有以下代码：

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Untitled Page</title>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $(".Note").click(function(){
        $(this).parent().parent().next(".divNote").slideToggle();
        });
    });
    </script>

  </head>
  <body>
    <table>
        <tr>
            <td class="Note" style="cursor: pointer">
                <font size="3" color="#800080"><b><u>TD</u></b> </font>
            </td>
        </tr>
    </table>
    <br />
    <div style="display: none" class="divNote">
    </div>
  </body>
</html>

我可以弄清楚为什么它不起作用。

例子：这里

任何帮助。

4

6 回答 6

6

让我解释为什么它不起作用

您已将过滤器添加到next()仅过滤掉匹配元素的函数中。在您的情况下，它只包含一个br没有匹配类名的元素 ( )，因此结果集被截断为零元素。

让它工作的方法

next因此，您必须从所有兄弟姐妹中过滤掉，而不是简单地过滤元素：

$(document).ready(function() {
  $(".Note").click(function(){
    $(this).parents("table").siblings(".divNote").slideToggle();
  });
});

或从所有下一个兄弟姐妹中过滤掉（当以前的兄弟姐妹根本不相关时）

$(document).ready(function() {
  $(".Note").click(function(){
    $(this).parents("table").nextAll(".divNote").slideToggle();
  });
});
于 2010-11-23T17:50:11.250 回答
4

$('document')是一个空引用。删除引号，使其引用对象而不是名为 document 的 HTML 元素。

在那之后，它应该工作。另外，请包含 jQuery 库并包含 DOCTYPE ...

编辑：您的脚本有几个问题。我这样调整它：

$(document).ready(function() {

$(".Note").click(function(){
        $(this).closest('table').nextAll("div.divNote").slideToggle();
        });

});

trtbody通常拥有它。最好使用最近的。还有，next给你next元素，next元素table是br...​</p>

于 2010-11-23T17:35:44.997 回答
2

这里有很多事情是错误的。

首先，不包括 jQuery。通过添加包括 jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

到你的头标。

其次，您应该$(document)不带引号引用。

一些浏览器（Firefox 测试）会自动插入一个tbody元素。您可以通过执行来检查这一点console.log($(this).parent().parent())。

一个解决方案是做$(this).parents("table").nextAll(".divNote").slideToggle();

于 2010-11-23T17:38:58.937 回答
2

问题在于 parent() 和 next()。（我假设您在 HTML 中使用了 jQuery，并且为了便于阅读，对上面的代码进行了修剪。）

.parent().parent() 的问题在于浏览器将其呈现为 .parent().parent() 。请注意其中的额外内容，这是您的 HTML 所暗示的。您可以通过 .parent().parent().parent() 解决这个问题，但更强大的解决方案是使用 .parents('table')。

对于下一个（）：

获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

您的下一个兄弟是
，它没有类“.divNote”。因此，您的选择器不返回任何内容。您想改用 nextAll() 。

把这一切放在一起...

$(".Note").click(function(){
    $(this).parents('table')
         .nextAll(".divNote").slideToggle();
});

在这里工作 jsFiddle：http: //jsfiddle.net/6WrjH/

于 2010-11-23T17:51:44.247 回答
0

您不包括那里的 jquery 库。没有它，任何 jquery 代码都无法工作。

于 2010-11-23T17:36:02.630 回答
0

您没有在页面上包含对 jQuery 的引用...将其添加到头部

[编辑]你有什么作品..它只是没有显示任何东西，因为你正在一个不可见的空div上执行slideToggle。如果您更改样式以便可以看到 div 并为其指定高度，则滑动切换很好。

还简化了 divNote 的选择，例如：

$(".divNote").slideToggle("slow");

问题不一定出在 parent() 和 next() 中，而更多在于您正在使用不可见的实体

于 2010-11-23T17:37:15.933 回答