Javascript 具有动态创建id的jQuery slideToggle类

我试图隐藏/显示评论回复

我尝试了一些方法，但无法使用动态

ids

获取类

我的html结构如下所示：

//一级
显示答复
//一级二级
显示答复
//二级三级
//四级没有孩子

根据请求更新。这将允许您显示嵌套注释并隐藏它们。如果隐藏父注释，则所有嵌套注释都将隐藏

注意：我把你的

父-

改为

子-

，因为这没有意义。如果您想保留它，您可以在下面的代码中更改类名的所有事件

所有代码都有完整的注释

---

//添加动态单击事件侦听器
$（文档）。在（'单击'，'上。显示答复'，函数（e）{
//切换按钮文本
if（$（this）.text（）=“显示答复”）{
$（此）.text（“隐藏答复”）；
}否则{
$（此）.text（“显示答复”）；
}
//从父元素获取注释id
commentID=$（this.parent（）.attr（“id”）；
//去拿身份证
commentID=commentID.replace（“comment-”，“”）；
//存储元素
el=$（“.childOF-”+commentID）；
//检查元素是否可见
如果（标高为（'：可见'））{
//如果隐藏，请检查嵌套注释
隐藏的（注释ID）；
//隐藏元素
el.slideUp（）；
}否则{
//显示元素
el.slideDown（）；
}
});
函数隐藏（nestedID）{
//查找作为所传递元素的子元素的元素
嵌套=$（“.childOF-”+nestedID）
//检查嵌套注释是否存在
如果（nested.length==0）{
//如果没有，则退出函数
返回；
}
//隐藏评论
nested.slideUp（）；
//更新按钮文本
嵌套的.find（“button.show_reply”）.text（“show reply”）；
//检查进一步的嵌套注释
hideNested（nested.attr（“id”）.replace（“comment-”，”）；
}

div[class^='childOF']，
div[class*='childOF']{
显示：无；
}

//一级
显示答复
//二级一级
显示答复
//三级二等儿童
显示答复
//四级儿童和三级儿童
//五级没有孩子

您可以在注释

div的

中隐藏包含

parentOf-

类的所有类

$("div[class*='parentOF-']").hide();

然后在每个按钮中，在单击时附加显示子注释的事件，否则使用代码段中描述的递归函数隐藏子注释及其所有子注释：

function hideRecurssive(id) {
      let $child = $(`.parentOF-${id}`);
      if($child.length>0) {
        var newId = $child.attr("id")
        // get last char that refer to child comment 
        newId = newId.charAt(newId.length - 1);
        $child.slideUp();
        var btn = $child.find(".show_reply");
        if(btn.length)  btn.text("show replies");
        hideRecurssive(newId);
      };
}

据我所知，这里有一个工作片段：

$（函数（$）{
$（“div[class*='parentOF-']”）的子类；
$（文档）。在（'单击'，'上。显示答复'，函数（e）{
e、 预防默认值（）；
设id=$（this.attr（“id”）；
if（$（this）.text（）=“显示答复”）{
$（此）.text（“隐藏答复”）
让$childComment=$（`.parentOF-${id}`）
$childComment.slideDown（）；
}else if（$（this）.text（）=“隐藏答复”）{
hiderecursive（id）；
$（此）.text（“显示答复”）
}
});
});
函数HIDERECURSIVE（id）{
设$child=$（`.parentOF-${id}`）；
如果（$child.length>0）{
var newId=$child.attr（“id”）
//获取引用子注释的最后一个字符
newId=newId.charAt（newId.length-1）；
$child.slideUp（）；
var btn=$child.find（“.show_reply”）；
如果（btn.length）btn.text（“显示回复”）；
隐藏递归（newId）；
};
}

.hide{
颜色：红色；
}
.解开{
颜色：黄色；
}

网主说！
谷歌切维里、雅班克帝力互联网公司；amp#39;在奥尔马亚-库兰-塔拉夫和埃迪利约尔地区，一位名叫德尔亚斯·恩塔姆·奥拉拉克的年轻人正在接受教育。Bunulla birlikte谷歌切维里，她的zaman mükemmel t
2021-01-09 02:23:38
回复显示回复
网主说！
翻译aracıhalihazırda 100&；amp#39;这是我的荣幸。
2021-01-09 02:23:56
回复显示回复
网主说！
谷歌在雅克扎马纳·卡达尔·阿夫鲁帕·帕拉门托斯·维里里尼·库兰·约杜（yakın zamana kadar Avrupa Parlamentosu ve BirleşmişMilleller gibi büyük kurulu ların verilerini kullanıyordu）的网站上翻译eviriler iç。圣维里勒·艾尔卡·索兹卢克·比尔吉列里·维勒·库兰·卡拉尔·塔拉夫
2021-01-09 02:24:19
回复显示回复
网主说！
雷沃雷沃雷沃雷沃
2021-01-09 18:10:46
回复
网主说！
谷歌的乔维里·纳斯·库兰·库勒？谷歌翻译anlaşılır bir arayüze sahip和keşfedilecek birçoközelliği var。
2021-01-09 02:24:43
回复

您的代码分配变量

commet id

，

parentOF

，但这些变量没有使用。这就是我不知道如何获取id的问题：（你的html代码是动态生成的吗？@GiorgosBetsos yes和commet id，parentOF-这两个都是动态生成的。请看这个，好的，根据你的需要发布一个答案，请检查答案。我使用了下面的代码，但什么都没有发生，你能给出一个完整的例子吗？

如果（parentOF！=null）{$（this）.text（）=“显示回复”？$（this）.text（“显示回复”）：$（this）.text（“隐藏回复”）；$（this）.最近的（parentOF）.nextUntil（parentOF）.slideToggle（）；}

ThanksDone.我将

.parentOF-

更改为

.childOF-

，因此要小心，否则代码对于无限数量的嵌套子注释是有效的。我一直在使用它