Question

选择表单元素时，更改所选图像（class=selected）的最简单方法是什么？我尝试了几种不同的方法（不成功），但我的Javascript有点生疏，所以我可以使用一些帮助。

我在每组单选按钮旁边显示一个图像，用于描述悬停或选择时的值。另外，我预先显示了selected默认值（通常是最受欢迎的答案）。 css确保相关图像显示在固定位置，z-index和opacity更改以显示正确的图像。唯一的问题是，当用户单击其上的单选按钮时，该值正确设置为selected，但未选择相应的图像。

我已在下方添加了相关摘要，并 posted a fiddle with the full css here。

<style type="text/css">
    .new li img {
            opacity: 0;}
    .new li.selected img {
            z-index: 2;
            opacity: 1;}
    .new:hover li.selected img {
            z-index: 0;}
    .new li:hover img {
            z-index: 2;
            opacity: 1;}
</style>

<div class="new alternate_image">
<ul>
  <li>
    <img src="sports.png" />
    <label><input type="radio" name="item1" value="Sports"/>Sports</label>
  </li>
  <li>
    <img src="fashion.png" />
    <label><input type="radio" name="item1" value="Fashion"/>Fashion</label>
  </li>
  <li class="selected">
    <img src="city.png" />
    <label><input type="radio" name="item1" value="City"/>City</label>
  </li>
</ul>
</div>

Answer 1

以下将完成这项工作。虽然它会影响所有单选按钮，但您可能需要调整第一个选择器（例如'.alternate_image input[type=radio]'）。

$('input[type=radio]').change(function() {
    var name = this.name;
    var self = this;
    $('input[name=' + name + ']').each(function() {
        $(this).closest('li').toggleClass('selected', this === self);
    });
});

http://jsfiddle.net/nonplus/qF3P9/1/

选择单选按钮时更改选择的图像

1 个答案: