next不起作用

jQuery .next is not functioning

本文关键字：不起作用 next      更新时间：2023-09-26

在此处（文档标题中）使用以下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: "-";
}

为什么next不起作用？是因为我正在将this对象传递给它吗？如果是，正确的方法是什么？

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

更改

ExpCol(this);

至

ExpCol($(this));

this不是jQuery对象，也没有为其定义next函数。（this是单击事件的源，在本例中是divDOM元素本身）

我想你打算：

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对象。

相关文章：