用於更改圖像的單選按鈕（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）

回答

相關問題