изменить изображение при нажатии

Question

У меня есть несколько изображений и радиокнопки в таблице. Я хочу, чтобы изображение изменялось в зависимости от переключателя, который пользователь нажимает.

Я могу изменить изображение. Проблема в том, что я не знаю, как изменить изображение обратно, если пользователь нажимает на другую кнопку на столе.

ниже мой код:

function changeImage(){ 
      var descriptionValue = Math.round($("input[type='radio']:checked").val()); 
     switch(descriptionValue) 
     { 
      case 25: 
      $("#twentyfive").attr('src',"/images1.gif"); 
      break; 
      case 30: 
      $("#thirty").attr('src',"/images2.gif"); 
      break; 
      case 50: 
      $("#fifty").attr('src',"/image3.gif"); 
      break; 
      case 80: 
      $("#eighty").attr('src',"/image4.gif"); 
      break; 
     } 
    }; 

HTML

<table border="0" cellpadding="0" align="center"> 
    <tr> 

     <td height="90">  
      <input type="radio" value="25.00"> 
      <img id="twentyfive" src="aimage1.gif" /> 
     <td>  
      <input type="radio" value="30.00"> 
      <img id="thirty" src="aimage2.gif" /> 
     </td> 
     <td>  
      <input type="radio" value="50.00"> 
      <img id="fifty" src="images3.gif" /> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="3" align="center">  
      <input type="radio" value="80.00"> 
      <img id="eighty" src="aimages4.gif" /> 
     </td> 
    </tr> 
    </tr> 
    </table> 

Answer 1

Это немного трудно сказать, на основании информации предоставленной Вами.

вместо того, чтобы использовать этот переключатель заявление, Почему вы не хранить изображения в объекте, например:

var images = [ 
    { 
     value: 25, 
     defaultImage: "aimage1.gif", 
     newImage: "/images1.gif" 
    }, 
    { 
     value: 30, 
     defaultImage: "/images2.gif", 
     newImage: "/images2.gif" 
    } 

]; 

и т.д. и т.п.

Тогда вы могли бы написать метод, как восстановить ваш образ по умолчанию и присоедините его к событию клика следующим образом.

$('table').on('click', function(){ 
    $('table').children().restoreDefault(); 
    $(this).changeImage() 
}); 

Answer 2

Вы должны сохранить текущий источник изображения, для которого вы можете использовать метод data(). Попробуйте что-нибудь:

function changeImage(){ 
    $("img").each(function(){ 
     var originalSrc = $(this).data("initial"); 
     if(originalSrc) 
     $(this).attr("src",originalSrc) 
    }); 
    var descriptionValue = Math.round($("input[type='radio']:checked").val()); 
    switch(descriptionValue) 
    { 
     case 25: 
     var src = $("#twentyfive").attr("src"); 
     $("#twentyfive").data("initial",src).attr('src',"/images1.gif"); 
     break; 
     case 30: 
     var src = $("#thirty").attr("src"); 
     $("#thirty").data("initial",src).attr('src',"/images2.gif"); 
     break; 
     case 50: 
     var src = $("#fifty").attr("src"); 
     $("#fifty").data("initial",src).attr('src',"/image3.gif"); 
     break; 
     case 80: 
     var src = $("#eighty").attr("src"); 
     $("#eighty").data("initial",src).attr('src',"/image4.gif"); 
     break; 
    } 
};