Jquery背景图像在Safari中不起作用答案

【问题标题】：Jquery background-image not working in SafariJquery背景图像在Safari中不起作用
【发布时间】：2016-12-24 10:38:08
【问题描述】：

我有一个动态创建的项目列表。鼠标输入这些项目，它们的信息会出现在一个框中（在本例中为class='pic_box'）。最初，.pic_box 的 background-image 被设置为列表中第一项的图片。

使用 jquery，我更改了框中的一些文本并更改了背景图像。在 Chrome 和 Firefox 中运行良好。在 Safari 中，文本会发生变化，但背景图像不会更新。

一个列表项：

<table id='inner_table_6' class='inner_table'>
<tr><td class='table_name'>Test Six Apartments</td></tr>
</table>
<script>jQuery(document).ready(function($) {
    $('#inner_table_6').mouseenter(function(){link_enter(6, 'Test Six Apartments', '21', 'test_pic_4.jpg');});
    $('#inner_table_6').mouseleave(function(){link_leave(6, 'Test Six Apartments', '21', 'test_pic_4.jpg');});
});
</script>

.pic_box：

<div class="pic_box" style="
    background-image:url('images/pictures/6/21/test_pic_4.jpg');
    background-repeat: no-repeat;
    background-size: cover;">
    <span id="pic_box_name">Test Six Apartments</span>
</div>

javascript函数：

var link_enter = function ($id, $apt_name, $pic_id, $pic_name){
    $('#pic_box_name').html($apt_name);
    $('.pic_box').css('background-image', 'url(images/pictures/'+$id+'/'+$pic_id+'/'+$pic_name);
}

我想这可能是因为 Safari 真的想在 url 周围加上一些引号，所以我尝试了这个：

$('.pic_box').css('background-image', 'url("images/pictures/'+$id+'/'+$pic_id+'/'+$pic_name+'"');

它给了我相同的结果，适用于 Chrome 和 Firefox，而不是 Safari。

我还尝试在页面加载时不设置背景图像，但这也无济于事，它会在 Safari 中保持空白并在 Chrome 和 Firefox 中更新。

【问题讨论】：

标签： jquery css safari

【解决方案1】：

你必须关闭你的网址括号。

'url("images/pictures/'+$id+'/'+$pic_id+'/'+$pic_name+'")'

【讨论】：