JQuery select div in row
質問
私は本当に立ち往生しています..緊急のアドバイスが必要です:Dは私のhtmlです:
<!-- Beginning of ROW !-->
<div id="row1">
<div id="entry">
free
<span>some text</span>
<p>DKK</p>
<input type="radio" name="red<% Response.Write(counter); %>" id="radio" value="0" />
</div>
<div id="entry">
week
<span></span>
<p>DKK</p>
<input type="radio" name="red<% Response.Write(counter); %>" id="radio2" value="75" />
</div>
</div>
<!-- End of ROW !-->
<!-- Beginning of ROW !-->
<div id="row2">
.... same as in row 1
</div>
<!-- End of ROW !-->
nth row ..
Jqueryは次のとおりです。
$("input").click(function() {
$("input").parent("div").css("background", "url(images/div_bg.png)");
$(this).parent("div").css("background", "url(images/div_bg_hover.png)");
});
私がやろうとしていることは、ラジオ入力を選択すると、それが配置されているdivが背景を変更し、1行しかない場合は完全に機能するはずですが、たとえば値を選択しようとすると最初の行で2番目の行の値を選択します。ラジオ入力が配置されている2番目の行のdivは必要に応じてバックグラウンドを変更しますが、最初の行のdivは他の背景に戻りますが、入力はチェックされたままです..達成しようとしています
これが私が達成したことです:
解決
jqueryの2行目の目的は何ですか?
$("input").parent("div").css("background", "url(images/div_bg.png)");
これにより、すべての「エントリ」の背景がリセットされます。 divあなたの目的を正しく理解しているなら、あなたが望むと思う:
$(this).parent("div").siblings("div.entry").css("background", "url(images/div_bg.png)");
これにより、変更中のエントリの兄弟だけが背景をリセットします。
補足的に、同じIDを持つ複数のdivがありますが、これはお勧めできません。
他のヒント
この行: $(&quot; input&quot;)。parent(&quot; div&quot;)。css(&quot; background&quot ;,&quot; url(images / div_bg.png)&quot;
が原因です他のすべてのアイテムを通常にリセットして、一度にアクティブ状態を1つだけにすることができます。各行で1つのアイテムを選択できるように、行にスコープを設定できます。
選択したすべての入力ボックスではなく、クリックしたアイテムにのみ動作を割り当てます。次のような関数を作成することもできます。
function foo()
{
$('input :selected').css(bar);
}
入力イベントでクリックイベントが発生するたびに、バーを呼び出します。仕様に合わせてfooを変更する必要がある場合があります。