jQuery .next 不起作用

Posted 2023-02-25

【中文标题】jQuery .next 不起作用

【英文标题】：jQuery .next is not functioning

【发布时间】：2013-07-19 05:46:43

【问题描述】：

在此处使用以下 jQuery（在文档的头部）：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function ExpCol(obj)

    var nextDiv = obj.next("div");
    nextDiv.animate(height: 'toggle', 800, function()
        var vClass = nextDiv.is(':visible') ? 'collapse' : 'expand';
        obj.children(":first").removeClass().addClass(vClass);
    );     

</script>

html 标记是这样的（在正文中）：

<div id="reqMat" onclick="ExpCol(this);">
    <span class="expand"></span><h4 class="inlineblock">Header Text Here</h4>
</div>
<div style="display: none;">
    <p class="desc">Text in here...</p>
    <p class="desc">Text in here...</p>
</div>

单独样式表中的 CSS 如下所示：

.inlineblock

    display: inline-block;

.expand, .collapse

    cursor: pointer;
    display: inline-block;
    font-size: 1.5em;
    padding-right: .1em;
    color: #605953;


.expand 
    content: "+";

.collapse

    content: "-";

为什么下一个不起作用？是因为我将this 对象传递给它吗？如果是这样，这样做的正确方法是什么？

【参考方案1】：

.next() 在普通 DOMElements 中不可用（除非您自己添加一个）。您将 DOMElement 传递给 ExpCol() 而不是 jQuery 对象。

改变

ExpCol(this);

到

ExpCol($(this));

【讨论】：

啊啊啊啊，原来如此！我知道这与this 部分有关。太感谢了！为我节省了很多时间！

【参考方案2】：

this 不是 jQuery 对象，您也没有为它定义 next 函数。 （this 是点击事件的来源，在本例中为div DOM 元素本身）

我想你打算：

var nextDiv = $(obj).next("div");

但是，由于您也有电话到obj.children，我建议您将代码更改为：

function ExpCol(element)

    var obj = $(element);

    var nextDiv = obj.next("div");
    nextDiv.animate(height: 'toggle', 800, function()
        var vClass = nextDiv.is(':visible') ? 'collapse' : 'expand';
        obj.children(":first").removeClass().addClass(vClass);
    );     

或使用ExpCol($(this)) 调用它，尽管这需要您始终记住传递ExpCol 一个jQuery 对象。

【讨论】：

感谢您对此的意见。 techfoobar 仅用 1 行就解决了所有问题。太棒了！