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

Question

我有一个动态创建的元素列表。鼠标输入这些元素，它们的信息会出现在一个框中(在本例中为 class='pic_box')。最初，.pic_box 的背景图像被设置为列表中第一项的图片。

使用 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 中更新。

Answer 1

您必须关闭网址括号。

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