Javascript 如何正确编写可以独立工作的jQuery切换按钮？

我正在尝试创建一个简单的脚本，它可以切换可以放置在页面上任何位置的按钮，并且无论结构如何，都可以独立工作

$（文档）.ready（函数（）{
$（'.togBtn'）。每个（函数（i）{
$（此）。单击（函数（）{
$（'.togItem'）.hide（）；
}否则{
$（'.togItem'）.show（）；
});
})；

但是1
项目1
但是2
但是3
项目2
项目3

您的代码中有几个问题。首先，

单击

处理程序函数不能有

否则

块。其次，您尝试隐藏/显示所有

.togItem

元素，而不是与单击按钮相关的元素

要更合理地处理此问题，请将按钮和要显示的内容分组在一起。然后，单击按钮时，可以使用DOM遍历查找相关项。在下面的示例中，我将这两个项都设置为

div

的子项，并使用

next（）

将它们关联起来。请尝试以下操作：

jQuery（函数（$）{
$（'.togBtn'）。单击（函数（）{
$（this.next（'.togItem'）.toggle（）；
});
})；

但是1
项目1
但是2
项目2
但是3
项目3

在和的帮助下获取按钮的id（如果按钮本身没有，则获取其父元素的id）：

然后只需将

togBtn

替换为

togItem

，即可获得相关项目的id，并将其用作以下项目的选择器：

例如：

$（.togBtn”）。在（“单击”，函数（）{
var togBtnId=$（此）
.closest（'[id^=“togBtn-“]'）/.closest（），因为“But 1”本身没有id，只有其父项
.attr（“id”）；
如果（togBtnId）{
$（“#”+togBtnId.replace（“togBtn”，“togbitem”））.toggle（）；
}
})；

但是1
项目1
但是2
但是3
项目2
项目3

给定的代码有什么问题吗？按钮似乎不起作用..获取按钮的id（或具有

togBtn-x

id的最接近的父级），将

togBtn

替换为

togBtn

，并将其用作选择器。如果某个按钮不起作用，您尝试调试该问题的原因是什么？我尝试使用

$（.togItem）.next（）

但它只适用于最后一项（'item 3'）@RedFrog它应该这样做，正如您在上面的示例中所看到的那样。@Andreas刚刚意识到您的意思！我在问题中读错了HTML:）您需要在单击的元素上同时使用。

数据目标

，以及在要切换的元素上使用匹配的

id

。您可能需要查看

var togBtnId = $(this).closest('[id^="togBtn-"]').attr("id");

$("#" + togBtnId.replace("togBtn", "togItem")).toggle();