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

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

1 个答案: