jquery - jQuery连续选择div

Question

我需要有关以下 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 应该改变背景，如果只有一行，它可以完美地工作，但是例如，如果我尝试选择第一行中的值，那么我在第二行中选择值。

无线电输入所在的第二行中的 div 更改了背景，但第一行中的 div 将自身反转为其他背景，尽管输入仍然处于检查状态。这是我想要实现的目标

这就是我所取得的成就：

Answer 1

您的第二行 jquery 的目的是什么？

$("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，这不是一个好主意。

Answer 2

此行：$("input").parent("div").css("background", "url(images/div_bg.png)"导致所有其他项目重置为正常状态，一次只能有 1 个活动状态。您可以将其范围限定为行，以便每一行都可以选择一个项目。

Answer 3

您只是将行为分配给单击的项目，而不是所有选定的输入框。您可能希望这样创建一个函数：

function foo()
{
   $('input :selected').css(bar);
}

现在，每当您在输入事件上获得点击事件时，都会调用 bar。您可能需要修改 foo 以满足您的规范。