Javascript 更改特定分区内h2的等级

我想这样做，每次你点击一个“h2”标签，里面的“输入”就会被选中，“h2”标签会改变背景，但是如果点击另一个“h2”标签，当前的突出显示和“输入”选择就会相应地改变

问题是，我有3个不同的表单做相同的事情，我的代码会影响所有的3个表单，而不是一个。如何将更改限制为仅包含在该表单中。这里有一些代码需要澄清 "

...
内容
...

我想这就是您需要的：

$("form h2").click(function() {
    var form = $(this).closest("form");
    $("#"+$(this).text().trim()).prop('checked', true);
    form.find('h2').removeClass('selected');
    $(this).addClass('selected');
});

---

所有更改仅限于此表单中的元素。

@Barmar从代码角度回答了这一问题。让我们看看如何帮助传递一些知识。有一些非代码概念可以帮助您在将来避免这个问题

在理解JavaScript和HTML如何协同工作时，这是一个常见且非常令人沮丧的错误。当您将h2元素放入onclick属性时，JavaScript并不完全“属于”h2元素，它只是在您单击它时运行。JavaScript可以触及页面其余部分的任何内容。这就是为什么

$（'h2'）。removeClass（）

正在选择每个

h2

元素

一般来说，你应该做一些事情来帮助你的困惑

将JavaScript放在脚本块中，或者更好地将其分开 文件，而不是HTML元素内部

使用jQuery只处理 一次一个

h2

（如Barmar建议）

阅读jQuery选择器的工作原理。文档很好，会花很多时间

---

您是否使用

标记作为获取大字体的一种方式？并非如此。我的h2标记是在cssright中定义的，现在$（'h2'）。removeClass（'selected'）工作得很好，只是它选择了文档中的每个h2。我如何才能这样做，它只选择此表单的h2。例如$（'form h2'），其中form将是该表单的id，这就是

form.find（'h2'）

所做的。但这要求您硬编码id，因此您不能更普遍地使用此代码。4。了解jQuery DOM遍历函数，这些函数对于选择与当前元素相关的元素非常有用。@Barmar非常感谢。对代码进行的小修改在“$”（“form h2”）。单击（function（）{var form=$（this）.最近的（'form'）；$（this）.查找（'input'）。prop（'checked'，true）；form.find（'h2'）。removeClass（'selected'）；$（this）.addClass（'selected'）；}）；'

$("form h2").click(function() {
    var form = $(this).closest("form");
    $("#"+$(this).text().trim()).prop('checked', true);
    form.find('h2').removeClass('selected');
    $(this).addClass('selected');
});