我有一个用id实现的img标记。
<img src="http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg" id="play-button" />
在我的javascript代码中,我有一个onclick事件来更改id“play-button”的图像源。图像从播放图标变为暂停图标。这是在事件中更改图像的行:
$("#play-button").attr("src", "http://www.beached.tv/assets/pause-c1c0a3d060f908372ebecf2eb7e7c018.svg");
我想做同样的事情,但不是引用网址,我只是想从我的rails资产中使用图像文件本身。
第一部分可以完成:
<%= image_tag("play.svg"), :id => "play-button" %>
如何修改javascript行以加载pause.svg?
答案 0 :(得分:0)
您应该将URL作为数据属性传递给图像标记:
<%= image_tag("play.svg", :id => "play-button", :data => { 'play-url' => image_path('play.svg'), 'pause-url' => image_path('pause.svg') } %>
然后在您的javascript中,您可以访问这些数据属性并在切换图像时使用网址:
var playButton = $("#play-button"),
playImgSrc = playButton.data('play-url'),
pauseImgSrc = playButton.data('pause-url');
// Switch to play button:
playButton.attr("src", playImgSrc);
// Switch to pause button:
playButton.attr("src", pauseImgSrc);
答案 1 :(得分:0)
您也可以在js中使用erb模板(your_file.js.erb
):
$("#play-button").attr("src", '<%= image_tag("play.svg") %>');