Question

我有一个动态创建的项目列表。 Mouseenter这些项目及其信息显示在一个框中（在本例中为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真的想在网址周围引用一些引号，所以我尝试了这个：

$('.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+'")'

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

1 个答案: