Question

我刚开始使用jQuery，实际上只需要一些非常基本的东西。这就是我想要做的事情：

我将内容分成“.overview”div和“.detail”div。 jQuery查看所有“.detail”-divs，向上移动一个元素（.prev（“。overview”））并附加一个按钮。然后它将所有“.detail”div缩小为零，并使用按钮分别显示/隐藏它们。

我首先对按钮进行了硬编码，但这似乎很乏味且不必要。但是一旦我动态生成它们，揭示/隐藏功能就不再起作用了。我四处寻找，但我可能没有使用正确的条款......

这是我的html：

<div class="title">
    <h2>Title</h2>
</div>
<div class="overview">
    <p>...</p>
</div>
<div class="detail">
        <p>...</p>
</div>

这是jQuery代码（在单独的文件中）：

$(document).ready(function() {

    $(".detail").each(function() {
        $(this).prev("div").append("<div class=\"expand\"><a href=#>more</a></div>");
        $.data(this, "realHeight", $(this).height());
    }).css({ overflow: "hidden", height: "0" });

    $(".expand").toggle(function() {
        $(this).html("<a href=#>less</a>")
        var div = $(this).next(".detail")
        div.animate({ height: div.data("realHeight")+21 }, 250);        
    }, function() {
        $(this).html("<a href=#>more</a>")
        $(this).next(".detail").animate({ height: 0 }, 250);
    });

});

如果你能指出我正确的方向，我将非常感激。或者，如果它是一个愚蠢的，只需告诉我我需要做什么搜索。： - ）

谢谢！

Answer 1

您需要阅读的技术是事件委派 - 请查看jQuery中的.on()和.delegate()函数，具体取决于您使用的版本。

然而，一般原则是，不是将事件处理程序绑定到单个元素（执行jQuery代码时必须存在），而是将单个事件处理程序绑定到您知道将始终存在的元素（例如运行依赖于选择器的函数的<body>标记。

当你点击你的按钮元素时，会触发该元素的click事件，然后冒泡DOM，为它在上升过程中遇到的每个元素触发。当它到达您始终存在的元素（您的<body>元素）时，它会根据提供的选择器检查事件的原始目标，并且仅在匹配时执行代码。

Answer 2

$ .next（）得到下一个兄弟，而“.detail”不是DOM结构中“.expand”的兄弟。您可能想要访问父级（“.overview”）然后获取下一个（）。

或改变结构，使他们成为兄弟姐妹。

修改：在你的代码中，你这样做，这就是为什么他们不是兄弟姐妹：

$(".detail").each(function() { $(this) .prev("div") // <- this gets the overview div .append("<div class=\"expand\"><a href=#>more</a></div>"); // <- this creates the "expand" as a child of the overview div (so not a sibling of details)

使用“父”工作，使用问题中的基本代码尝试此fiddle。

这是另一个fiddle，其中div“expand”作为兄弟使用insertBefore插入。它完全相同，您不需要.parent()调用。

jQuery适用于手动创建的HTML而不是jQuery创建的HTML？

2 个答案: