Question

我正在为图片库使用简单的jquery函数。有一个div缩略图，然后是目标div，在点击缩略图后加载大图像。

它在所有浏览器中都运行良好，除了Safari之外，其中加载了图像的绝对URL，而不是加载到div中。

这是jquery代码：

$("#thumbnails a").click(function() {
    $("#work").html($("<img>").attr("src", this.href));

    return false;
});

有什么想法？感谢

Answer 1

this.href不安全！

使用$(this).attr('href')，它会起作用。

点击此处查看我的问题：Retrieving HTML attribute values "the DOM 0 way"

它解释了有几个HTML属性（其中href）是有问题的，所以应该使用jQuery的attr()来检索它们的值。

引用该页面上的答案：

例如，一个的href属性元素总是完全报告合格的网址 getAttribute（“href”）将返回 HTML href中指定的字符串属性逐字。当然，除了在IE中。 jQuery的attr（）确实尝试过规范化这种不一致。

<强>更新

我明白了。您没有确保在DOM准备好之后运行jQuery代码。始终将所有jQuery代码放在ready处理程序中：

$(function() {

    // place all jQuery code here

});

更新2

试试这段代码：

$('#thumbnails a').click(function() {
    $('#work').empty().html( '<img src="' + $(this).attr('href') + '">' );
    return false;       
});

我应该早点看到这个。 html（）函数的参数必须是一个字符串。

更新3

可能是Safari（至少）不执行完全通过jQuery的load（）方法加载的页面上的JavaScript代码。

然而，我认为我想出了如何处理它！

在1776.php页面上，将SCRIPT元素从HEAD移动到文档的BODY。

<body>
    <script> ... the code ... </script>
    <div> ... </div>
</body>

Answer 2

$("#thumbnails a").click(function() {
      $('#work').empty().append($('<img>', {
           src:   this.href
      }));
      return false;
});

Answer 3

我对this.href感到困惑，因为当你在属性$("#work")时。

试试这个：

$("#thumbnails a").click(function() {
    var urlHref = $(this).attr('href');
    $("#work").html($("<img>").attr("src", urlHref));
    return false;
});

Answer 4

仅在Safari Mobile中通过javascript附加图片时，请使用css属性background:url(...)代替<img>标记。它不适用于<img>代码。

jquery html（$（“<img/>”）。attr（“src”，this.href））;不在Safari工作

4 个答案: