Question

我有一个jquery代码：

$('.image_thumb').click(function() {
 var big_image = $('.image_thumb').attr('src').replace('thumbs/','').replace('skin/','');
 alert(big_image);
   $('body').html('<div style="position: absolute; left: 0; top: 0; width: 100%; height:100%; background-color: #000000; background: url("..'+big_image+'") center center no-repeat;"></div>'
);
});

当我点击.image_thumb元素时，它首先显示一个警告，即“images / work / 1 / image.png”。但是当div加载时，背景中的url值如下所示：“images work 1 image.png” - 所有斜杠都替换为空格。有人可以解释一下这是什么？ :)）Thanx。

很有趣，但以下代码完美无缺：

    $('.image_thumb').click(function() {
 var big_image = $('.image_thumb').attr('src').replace('thumbs/','').replace('skin/','');
 alert(big_image);
   $('body').html('<div style="position: absolute; left: 0; top: 0; width: 100%; height:100%; background-color: #000000;"><img src="'+big_image+'"></div>'
);
});

只有一个问题 - 我不能将图像居中（因为我不知道宽度和高度），所以我几乎坚持使用第一个选项。

Answer 1

我自己找到了解决方案，而且非常...嗯......傻：

$('.image_thumb').click(function() {
 var big_image = $('.image_thumb').attr('src').replace('thumbs/','');
 alert(big_image);
  $('body').html('<div style="position: absolute; left: 0; top: 0; width: 100%; height:100%; background: url('+big_image+') #000000 center center no-repeat;"></div>'
);
});

背景中的双引号：url（）由于某种原因而受到干扰。

另一件事是，我必须删除.replace（'skin /'，''）而不是在url（）中使用..现在它完全正常。

Answer 2

我的解决方案是将除background-image之外的所有属性放入类中，创建div，为其分配类并设置background-image属性，然后用它替换body元素（顺便说一句，这不是一个好主意）：

<强> CSS：

.newElement {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-position: center center;
    background-repeat: no-repeat;
}

<强> jQuery的：

$('.image_thumb').click(function() {
    var big_image = $('.image_thumb').attr('src').replace('thumbs/','').replace('skin/','');
    alert(big_image);
    var newElement = $('<div></div>').addClass('newElement').css('background-image', 'url(../' + big_image + ')');
    $('body').replaceWith(newElement);
});

Fiddle

jQuery - 毫无理由地用空格替换斜杠

2 个答案: