gpt4 book ai didi

javascript - jQuery 切换动态生成的嵌套元素

转载 作者:太空宇宙 更新时间:2023-11-04 10:40:48 25 4
gpt4 key购买 nike

我目前正在设计一个网页,该网页呈现类似 Twitter 的用户输入,生成 <li> (在 <ul> 内)附加一个 <h6> 的元素元素(帖子的标题)和一个 <p>下面的元素(内容)。这是有效的,因此元素的输入和生成不是问题。
但我想做的是使用 jQuery 来隐藏帖子的内容,并在我单击帖子标题时切换它。问题是事件处理程序似乎只适用于每两个帖子。每当我再次发布时,列表中的第一个帖子可以切换,第二个不是,第三个是,等等。

根据我在一些答案中看到的内容,我尝试了 .click()方法,.on()方法,我尝试替换 .toggle().hide().show()在条件下,然后用 display:none 创建了一个点击切换。这是我的最后一站,结果如上段所述。这是事件处理程序:

$('.postinstance').on("click", "h6.postname", function() {
$(this).siblings().toggleClass('postOff');
});

.siblings()实际上只是帖子内容,但这是我接近我想要的东西的唯一方法。当我更换 $(this).siblings()使用内容元素的实际类,当我单击任何标题时,每个帖子的内容都会切换。
如何在我点击每个帖子时单独打开它?

Here's a JSFiddle isolating the input & posts part.

我仔细查看了 Stack Overflow 和其他地方,甚至是教程,以解决这个问题,但尽管发现了类似的问题,但他们的答案都没有提供解决方案。

最佳答案

您不应将事件处理程序直接附加到动态生成的元素,而应使用一些公共(public)父元素。这是您的一段代码片段,我在其中更改了选择器,一切都开始工作了:

$('.postlist').on("click", "h6.postname", function() {
$(this).siblings().toggleClass('postOff');
});

重要说明:您必须将这段代码从 $('.postbtn').click(..) 中拉出上一级,否则对于偶数个帖子切换将不起作用!

关于javascript - jQuery 切换动态生成的嵌套元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35828536/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com