0

「h2」タグをクリックするたびに「input」内部が選択され、「h2」タグの背景が変わるようにしたいのですが、別の「h2」タグをクリックすると、現在のハイライトと「input」それに応じて選択が変わります。

問題は、同じことを行う3つの異なるフォームがあり、私のコードでは1つではなく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 がどのように連携するかを理解する上でよくある、非常に苛立たしい間違いです。JavaScript は、onclick 属性に配置したときに h2 要素に完全に「属する」わけではなく、クリックすると実行されるだけです。JavaScript は、ページの残りの部分に触れることができます。そのため、すべての要素$('h2').removeClass()を選択しています。h2

一般に、混乱を避けるためにいくつかのことを行う必要があります。

  1. JavaScript は、HTML 要素内ではなく、スクリプト ブロック内に配置するか、別のファイルに配置することをお勧めします。
  2. jQuery を使用して、一度に 1 つだけ処理しますh2(Barmar が提案したように)。
  3. jQueryセレクターがどのように機能するかを読んでください。jquery.comのドキュメントは非常に優れており、十分に時間を費やすことができます。
于 2013-10-25T04:08:16.710 に答える