0

我想让它每次你点击一个'h2'标签时，里面的'input'都会被选中并且'h2'标签会改变背景，但是如果点击另一个'h2'标签，当前的突出显示和'input'选择相应地改变。

问题是我有 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>
4

2 回答 2

2

我认为这是你需要的：

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

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

于 2013-10-25T03:50:46.817 回答
0

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

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

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

  1. 将您的 JavaScript 放在脚本块中，或者更好的是单独的文件中，而不是放在 HTML 元素中。
  2. 使用 jQuery 一次只处理h2一个（正如 Barmar 建议的那样）。
  3. 阅读 jQuery 选择器是如何工作的。jquery.com文档非常好，会花时间。
于 2013-10-25T04:08:16.710 回答