jquery 如何在JavaScript中设置rails背景图片url?

ltqd579y  于 2023-10-17  发布在  jQuery
关注(0)|答案(2)|浏览(101)

在我的rails应用程序中,我有一些内容和图像按钮(每一个内容都有一个图像)。当用户点击按钮时,我想显示相应的图像。
在我的项目中,我将所有图像保存在assets/images/preview/id1.png下(例如)。在我的JavaScript代码中,当单击view-content按钮时,我想更改背景图像以显示相应的图像。我想根据分配给该按钮的ID查找图像。我如何才能做到这一点?
如何设置背景图片的url:
_page2.html.erb

<div class="content">
<table>
    <tr>
        <td>    content about the image    </td>
        <td> <div id="<%= content[:lable].delete(' ')%>" class="view"> VIEW-IMAGE</div></td>
    </tr>
    <tr>
        <td>content about the image</td>
        <td><div id= "<%= content[:lable].delete('')%>" class="view">VIEW-IMAGE</div></td>
    </tr>
</table>

content/preview.js

$('.view').click(function (event){
     var image = $(this).id
   $(this).css("background", "url(image.jpg) no-repeat");
    });
    });

Jsfiddle中的链接:http://jsfiddle.net/bkrx2rxz/1/
在content/preview.js

$('.view').click(function (event){
    $(this).css("background", "url(sample.png) no-repeat");
    });

我尝试使用上面列出的代码。图像似乎没有加载,因为它在content/sample.png而不是assets/images/sample.png中搜索图像。

5rgfhyps

5rgfhyps1#

试试这个

$('.view').click(function (event){
    $(this).css("background", "url(assets/images/sample.png) no-repeat");
    });

编辑

在你的例子中,如果你想根据元素的id设置背景,只需像这样修改代码:

$('.view').click(function (event){
  var id = $(this).attr('id');
  $(this).css("background", "url(assets/images/" + id + ".png) no-repeat");
});
dly7yett

dly7yett2#

当我在资产前添加斜线时,它对我很有效,我在这里删除了图像

$('.view').click(function (event){
    $(this).css("background", "url(/assets/sample.png) no-repeat");
    });

相关问题