jQuery 选择一行中的 div
我需要有关以下 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 将自身反转为其他背景，尽管输入仍保持选中状态。这是我想要实现的目标
这是我实现的目标：
I need advice on the following 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 ..
Here is 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)");
});
What I'm trying to do: when I select a radio input the div in which it is located should change background and it works perfectly if there is only one row, but for instance if I try to select the value in first row then I select value in second row.
The div in second row where radio input is located changes background as it should but the div in first row reverse itself to other background although input remained checked. Here is what I'm trying to achieve
And here is what I achieve :
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你的jquery第二行的目的是什么？
这将重置所有“入口”div 的背景。如果我正确理解您的目标，我认为您想要：
这样，只有您正在更改的条目的兄弟姐妹才会重置其背景。
附带说明一下，您有多个具有相同 id 的 div，这不是一个好主意。
What is the purpose of your second line of jquery?
This is going to reset the background of all the "entry" divs. If I understand your objective correctly I think you want:
That way only the siblings of the entry you are changing will get their backgrounds reset.
On a side note, you have multiple divs with the same id, which is not a good idea.
此行：
$("input").parent("div").css("background", "url(images/div_bg.png)"导致所有其他项目重置为正常，一次只能有 1 个活动状态，您可以将其范围限定为行，以便每一行都可以选择一个项目。This line:
$("input").parent("div").css("background", "url(images/div_bg.png)"is causing all of the other items to reset to normal, allowing you to only have 1 active state at a time. You could scope it to the row so that each row may have one item selected.您仅将行为分配给单击的项目，而不是所有选定的输入框。您可能想要创建一个这样的函数：
现在，每当您在输入事件上收到单击事件时，请调用 bar.您可能需要修改 foo 以满足您的规范。
You're only assigning behavior to the item clicked, rather than all selected input boxes. You might want to make a function as such:
Now whenever you get a click event on an input event, call bar. You may need to modify foo to meet your specifications.