根据图像选择显示新图像

Display a new image based on image choices

本文关键字：图像 新图像 显示 选择      更新时间：2023-09-26

我试图在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>

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

我设法得到缩略图作为单选按钮，这工作得很好。我设法用普通的单选按钮来交换图像。但是我不能把两者结合在一起。

所以，我认为你是对的。虽然我对隐藏按钮并将其替换为标签的功能有点困惑，但我相信您想要的是使缩略图具有单选按钮的功能。你所要做的就是把当前的

<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来完成繁重的工作。

相关文章：