Question

我有一个用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？

Answer 1

您应该将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);

Answer 2

您也可以在js中使用erb模板（your_file.js.erb）：

$("#play-button").attr("src", '<%= image_tag("play.svg") %>');

在javascript代码中访问ruby图像资源

2 个答案: