Изменение источника изображения Javascript на основе выбора переключателя

Question

Извините, если этот вопрос уже был дан. Я искал через StackOverflow (а также другие сайты), и любые подобные вопросы, похоже, не помогли мне. Во всяком случае, вот моя дилемма:

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

Для некоторых справочной информации о том, как именно моей странице построена:

Все содержится в модуле Drupal. Модули Drupal подключаются к нашему основному серверу, на котором размещается множество веб-страниц и апплетов. Отдельный апплет построен с помощью Javascript, jQuery, CSS + HTML.

Я не могу поделиться кодом, так как это работа под руководством работодателя, но если вы хотите, чтобы я уточнил дальше или давал некоторый pseduocode, я могу это сделать.

Спасибо!

(PS - Это мой первый пост в StackOverflow, и я думаю, что следил за рекомендациями сообщества, но если есть какие-либо советы о том, как я мог бы лучше задать свой вопрос (и любые будущие), пожалуйста, напишите мне строку!)

Answer 1

Вы можете сделать это следующим образом

HTML

<img id="my_image" src="http://i.imgur.com/tL6nW.gif" alt=""> 

    <br> 
<input class="radio" type="radio" name="radio" value="http://i.imgur.com/tL6nW.gif" checked>Image1<br> 

<input class="radio" type="radio" name="radio" value="http://i.imgur.com/BfZ5f.gif">image2 
</form> 

JS

$('.radio').on({ 
    'click': function(){ 

     var image_url=$(this).val(); 
     $('#my_image').attr('src',image_url); 
    } 
}); 

Вот JsFiddle

Если вы хотите, чтобы сделать его полностью динамическими вы можете инициализировать изображение по умолчанию на изображении элемента в момент загрузки страницы тоже. Дополнительный код будет примерно таким.

$(document).on('ready',function(){ 
$('#my_image').attr('src','default.gif'); 
});