有人告诉我为什么这个 Jquery 在 IE 中不起作用？答案

【问题标题】：Anyone tell me why this Jquery doesn't work in IE?有人告诉我为什么这个 Jquery 在 IE 中不起作用？
【发布时间】：2009-08-14 23:34:00
【问题描述】：

以下代码在 FF chrome 等中运行良好，但在 IE 中运行良好，有人知道为什么吗？

基本上一切正常都接受图片属性的替换

$("#container #main_image img#largeId").attr({ src: largePath });

即使是函数的其余部分，即交换类也有效，只是图像替换无效。完整的例子可以在这里看到example点击图像并尝试在模态窗口右侧的缩略图之间切换。

我想要的效果类似于这个网站webdesignerwall 的效果，jQuery 几乎完全一样——尽管这适用于 IE ！！！

jQuery(document).ready(function($) {

  $("a.group").fancybox({
    'frameWidth':966,
    'frameHeight': 547,
    'hideOnContentClick': false,
    'overlayOpacity': 0.85,
    'callbackOnShow': function() {
      $("#container ul#thumbnails li a").click(function(){
        var largePath = $(this).attr("title");
        $("#container #main_image img#largeId").fadeOut().hide();
        $("#container #main_image img#largeId").attr({ src: largePath });
        $("#container #main_image img#largeId").fadeIn("slow");
        $('.active').removeClass('active');
        $(this).addClass("active");return false;
      });
    }
  });

});

【问题讨论】：

“不工作”是什么意思？代码应该做什么，当您尝试它时会发生什么，以及这与您的预期有何不同？你检查过错误信息吗？
这可能不是您的问题，但是如果您按 ID 选择，为什么要使用 $("#container #main_image img#largeId")，它们应该是唯一的，所以 $('#largeId')够不够？
我正在使用完整路径来尝试看看这是不是让 IE 感到困惑但没有运气
你知道IE有3个版本吗，帮忙说一下什么版本。
更新了我的答案....找到另一个灯箱...

标签： javascript jquery internet-explorer jquery-plugins

【解决方案1】：

好的，我已经解决了。这很痛苦，我得出的结论是该插件完全错误:)

插件复制隐藏的内容并将其插入“盒子”。这意味着您最终会得到重复的 id，这当然是无效的，有趣的事情开始发生。当您选择 $('#largeId') 时，它实际上引用了原始隐藏照片。如果您从#hidden 中删除 display:none 样式，您可以看到这一点。

结论是使用真正附加内容而不是复制内容的灯箱。我不喜欢作者所做的一切。

您可以修改插件代码以使用 append 而不是 using（插件的第 112 行）像这样

 var newHtml = $('<div id="fancy_div" />').append(target);
 _set_content(newHtml.html(), opts.frameWidth, opts.frameHeight);

然后，您将不得不在灯箱关闭时将 html 放回原处。不过我更倾向于找到更好的灯箱！

【讨论】：

非常好——这启发了我去寻找答案！只需将 largeId 从“id”更改为“类”！它之所以有效，是因为它不是个人 ID！哇哇哇！非常感谢！

【解决方案2】：

您是否使用过 Fiddler 来查看是否正在请求图像？

这对我总是有效：$("#foo").attr("src",url);

你也可以只做一个替换。

$('#foo').before('').remove();

【讨论】：

没有 fiddler 但 firebug 和 IE 开发工具栏报告没有错误 - $("#foo").attr("src",url);不幸的是不起作用
免费安装 Fiddler：fiddler2.com/fiddler2 Firebug lite 不会告诉你关于 http 调用的废话。

【解决方案3】：

除了 BipedalShark 的回答之外，我还注意到了一些让我印象深刻的事情：

您在页面顶部从 google 调用 jquery.min.js。
稍后，您将在页面底部附近调用 fancybox.js。
最后，您正在调用另一个 jquery.js。

所以我知道（以及可能的解决方案）这可能是问题的部分原因吗？或者，fancybox需要在页面底部加载吗？

【讨论】：

他的 jquery.js 只包含 $(document).ready(..) 函数的代码。

【解决方案4】：

标签的 title 属性中列出的路径不正确（检查案例）。具体来说，

<a class="group" href="#hidden" title="images/2_large.jpg">

应该是

<a class="group" href="#hidden" title="Images/2_large.jpg">

Firefox 稍微宽容一点，但 IE 拒绝这种恶作剧。

【讨论】：

这些不是调用图像替换功能的链接，所以很遗憾更改这些没有任何区别！

【解决方案5】：

基本上，这已通过将目标元素从“ID”更改为“类”来解决。

因为Fancybox在调用模态窗口时复制了id，所以需要这样做！

非常感谢大家在这里的帮助！

【讨论】：