javascript - 用于更改图像的单选按钮(Javascript/HTML)

Question

我有 3 个图像，当单击相应的单选按钮时必须更改它们。这些图像名为 spaghetti.jpg、salade.jpg 和 cremeglacee.jpg。它们位于名为 images 的文件夹中。

到目前为止，这就是我所拥有的，但它不起作用。当我打开页面时，第一个图像 (spaghetti.jpg) 会加载，但当我单击单选按钮时，图像不会更改。

<p>
<img src="images/spaghetti.jpg" alt="spaghetti" name="Spaghetti" />

Spaghetti <input type="radio" name="demo" value="spaghetti" checked
           onclick="image.src='images/spaghetti.jpg'"/> <br>
Salade <input type="radio" name="demo" value="salade"
           onclick="image.src='images/salade.jpg'"/> <br>
Cr&egrave;me glac&eacute;e <input type="radio" name="demo" value="cremeglacee"
           onclick="image.src='images/cremeglacee.jpg'"/> <br> <br>
</p>

Answer 1

$(document).ready(function(){
        $("input:radio[name=demo]").click(function() {
            var value = $(this).val();
            var image_name;
            if(value == 'spaghetti'){
                image_name = "images/spaghetti.jpg";
            }else{
                if(value == 'salade'){
                    image_name = "images/salade.jpg";
                }else{
                    image_name = "images/cremeglacee.jpg";
                }
            }
             $('#imgS').attr('src', image_name);
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/spaghetti.jpg" alt="spaghetti" name="Spaghetti" id="imgS"/>

Spaghetti <input type="radio" name="demo" value="spaghetti"/> <br>
Salade <input type="radio" name="demo" value="salade"/> <br>
Cr&egrave;me glac&eacute;e <input type="radio" name="demo" value="cremeglacee"/> <br> <br>

使用 JQUERY，您可以非常轻松地完成此操作，请检查上面的代码片段。当用户单击输入时，它会检查单选按钮的值，然后根据该值将图像的 src 属性更改为相应的图像。

马特