javascript - 根据单选按钮选择更改 Javascript 变量图像源

Question

如果这个问题已经得到回答，请提前致歉。我搜索过 StackOverflow(以及其他网站)，任何类似的问题似乎都没有帮助我。无论如何，这是我的困境:

我有一个单选按钮可以控制 javascript 变量的图像源。本质上，我希望图像在点击时发生变化，并且以一种需要对页面进行最少更改的方式发生。我意识到这可能是一个简单的请求，但我在 JavaScript 方面没有那么丰富的经验，这让我很困惑。

关于我的页面是如何构建的一些背景信息:

一切都包含在一个 Drupal 模块中。 Drupal 模块连接到我们的主服务器，该服务器托管许多网页和小程序。单独的小程序是用 Javascript、jQuery、CSS+HTML 构建的。

我不能分享代码，因为它是在雇主手下工作，但如果你想让我进一步阐述或提供一些伪代码，我可以做到。

谢谢!

(附:这是我第一次在 StackOverflow 上发帖，我想我遵循了社区准则，但如果有任何关于如何更好地提出我的问题(以及任何 future 的问题)的建议，请给我留言!)

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');
});