Question

我想这样做，以便每次点击'h2'标签时，内部的'输入'被选中，'h2'标签改变背景，但如果点击另一个'h2'标签，则当前高亮显示“输入”选择会相应更改。

问题是我有3个不同的做同样的事情，而我的代码所有3个表格都受到影响而不是一个。如何限制我的更改仅包含在该表单中。以下是一些澄清的代码 “

<form>
    ...
    <h2 onclick="document.getElementById(1001).checked='True'
    $('h2').removeClass('selected');
    $(this).addClass('selected');
    ">
    CONTENT
    <input type="radio" name="radio" id="1001" value="1001" />
    </h2>
    ...
 </form>

Answer 1

我认为这就是你所需要的：

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

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

Answer 2

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

理解JavaScript和HTML如何协同工作这是一个常见的，非常令人沮丧的错误。当您将它放在onclick属性中时，JavaScript并不完全“属于”h2元素，它只是在您单击它时运行。 JavaScript可以触摸页面其余部分中的任何内容。这就是$('h2').removeClass()选择每个h2元素的原因。

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

将您的JavaScript放在脚本块中，或者更好地分开文件，而不是HTML元素。
使用jQuery只处理一次h2一个（如Barmar建议的那样）。
阅读一些jQuery选择器如何工作的内容。 jquery.com文档非常好，花费时间。

更改特定div中的h2类

2 个答案: