Question

我正在尝试使用单选按钮创建HTML格式的表单。单选按钮需要是单独的可点击缩略图图像（因此不会看到任何浏览器样式的单选按钮，并且每个单选按钮都不同）。将有3组单选按钮，每组有3个选项。

这些需要在最后组合，根据用户选择的选项在页面的其他位置显示更大的主图像。

我想让主图像动态变化，因为用户选择了每个选项。 - 我不希望最后有一个带有提交按钮的表单。

有人有任何想法吗？

我到目前为止的代码是：

    <style>
label {display:block;}
.radio {
    opacity: 0.5;
    width: 80px;
    height: 80px;
    float: left;
    margin: 5px;                   
}
.checked {opacity: 1;}
#single {background: url(a.jpg);}
#double {background: url(b.jpg);}
#none {background: url(c.jpg);}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


<script type="text/javascript">   
$(function() {
    $('input[type=radio].radio-image').each(function() {
        var id = this.id;
        $(this).hide().after('<a class="newrad" href="#"><div class="radio" id="' + id + '"></div></a>');
    });
    $('.newrad').live('click', function(e) {
        e.preventDefault();
        var $check = $(this).prev('input');
        $('.newrad div').attr('class', 'radio');
        $(this).find('div').addClass('checked');
        $('input[type=radio].radio-image').attr('checked', false);
        $check.attr('checked', true);
    });
});

    $(document).ready(function() {
        $("input:radio[name=wardrobe]").change(function() {
            if (this.value == "a") {
                $("#imgOne").attr(
                    'src', 'a.jpg'
                );
            }
            else {
                $("#imgOne").attr(
                    'src', 'b.jpg'                   
                );
            }
        });
    });
</script>

</head>

<body>


<form>
 <label><input type="radio" class="radio-image" name="wardrobe" id="single"    value="a" />A</label>
 <label><input type="radio" class="radio-image" name="wardrobe" id="double"  value="b" />B</label>
 <label><input type="radio" class="radio-image" name="wardrobe" id="none" value="c" />C</label>
 </form>


<img id="imgOne" />


</body>

这只是一个部分代码，对于第一组选项，我用它作为起点。

我设法将缩略图作为单选按钮，效果很好。我设法得到正常的单选按钮来交换图像。但我不能让两者一起工作。

Answer 1

所以，我认为你走在正确的轨道上。虽然我对隐藏按钮并用标签替换它的功能有点困惑，但我相信你想要的是使缩略图像具有单选按钮的功能。您所要做的就是替换当前的

<input type="radio" class="radio-image" name="wardrobe" id="single" value="a" />

与

<img src="a.jpg" class="radio-image" data-ref="a"/>

并更改您的jQuery以允许这些新图像：

$(document).ready(function() {
    $('img.radio-image').click(function() {
        $("img.selected").removeClass("selected");
        $(this).addClass("selected");
        $("#imgOne").attr("src", $(this).attr("data-ref") + ".jpg");
    });
});

和css

img{
    border: 1px solid transparent;
}
.selected {
    border: 1px solid #00c;
}

诀窍是你的图像只需要坐在那里。让jQuery做繁重的工作。我希望这会有所帮助。

根据图像选择显示新图像

1 个答案: