用于更改图像的单选按钮（Javascript/HTML）

我有3个图像，单击相应的单选按钮时必须更改。这些图像被称为spaghetti.jpg，salade.jpg和cremeglacee.jpg。他们在一个名为图像的文件夹中。用于更改图像的单选按钮（Javascript/HTML）

到目前为止，这是我的，它不工作。第一张图片（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>

来源

2016-12-15 Alessa Mattia

'image'（in'image.src'）究竟是什么？ - 给''一个id属性，sae'someid'，然后像'document.getElementById（'someid'）那样使用。src ='whatever'' –

$(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属性更改为相应的图像。

Matt

来源

2016-12-15 03:31:16

用于更改图像的单选按钮（Javascript/HTML）

回答

相关问题