如何拍摄两个单选按钮的输入并将其输出为图像?

时间:2012-04-30 17:59:34

标签: javascript forms radio-button

到目前为止,这是我的代码:

http://jsfiddle.net/pRXxT/

我正在努力使它如果我选择一个收音机盒,图像将使用该颜色更新,但有两个收音机而不是一个。

每个单选框都有一个与文件名分开的部分,以便最终结果为:

的http:// blahblah /图像/ [radiobox1] [radiobox2] .jpg文件

我一整天都在玩这个并且可以使用一些帮助。尝试不同的东西,我的代码有点混乱,我留下的代码只能更新CSS部分中的第一个图像,所以我不会丢失它。

由于

1 个答案:

答案 0 :(得分:2)

你的代码有点凌乱它让我想了解你想要什么,你在jquery选择器中有一些重大错误所以这里有一些更正,我认为这将有效:

HTML:

<input type="radio" class="radio1" name="BodyColor" value="blk"/> Black<br/>
<input type="radio" class="radio1" name="BodyColor" value="green"/> Green<br/>
<input type="radio" class="radio1" name="BodyColor" value="yellow"/> Yellow<br/>

<input type="radio" class="radio2" name="InsertColor" value="red"/> Red<br/>
<input type="radio" class="radio2" name="InsertColor" value="green"/> Green<br/>
<input type="radio" class="radio2" name="InsertColor" value="yellow"/> Yellow<br/>

<img src="blkblk.jpg" id="FinalImage" height="100px" width="100px">

JavaScript的:

$(document).ready(function() {
    var BodyColor = 'blk';
    var InsertColor = 'blk';

    $(".radio1").click(function() {
        BodyColor = $(this).attr('value');
        updateImage();
    });
    $(".radio2").click(function() {
        InsertColor = $(this).attr('value');
        updateImage();
    });

    function updateImage() 
    { 
        //i don't know the uri you actually want so i'm gonna leave it like it is
        $("#FinalImage").attr('src', BodyColor + InsertColor + ".jpg");
    }

});

编辑刚刚测试过,效果很好