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

Question

下面的代码在FF chrome等中可以正常工作，但在IE中则不能，有人知道为什么吗？

基本上所有的工作都可以接受image属性的替换

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

甚至该功能的其余部分（即交换类）都可以工作，而不是图像替换。 完整的示例可以在此处看到， 示例单击图像，然后尝试在模式窗口右侧的缩略图之间切换。

我要达到的效果与本网站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;
      });
    }
  });

});

Answer 1

好的，我已经解决了。 这很痛苦，我断定该插件是完全错误的：）

插件将复制隐藏的内容并将其插入“框”中。 这意味着您到处都是重复的ID，这当然是无效的，并且有趣的事情开始发生。 选择$（'＃largeId'）时，它实际上引用的是原始隐藏的照片。 如果您从#hidden中删除display：none样式，则可以看到此内容。

结论是使用一个实际上附加内容而不是重复内容的灯箱。 我不喜欢作者的所作所为。

您可以修改插件代码以使用append而不是使用（插件的第112行），如下所示

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

然后，您必须处理在关闭灯箱时放回html的问题。 不过，我会更倾向于寻找更好的灯箱！

Answer 2

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

这总是对我有用：$（“＃foo”）。attr（“ src”，url）;

您也可以代替。

$（'＃foo'）。before（'<img src =“” ... />'）。remove（）;

Answer 3

<a>标记的title属性中列出的路径不正确（请检查大小写）。 特别，

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

应该

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

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

Answer 4

除了BipedalShark的答案外，我还注意到了一些我想起的事情：

1. 您是在页面顶部从Google调用jquery.min.js。
2. 稍后，您将在页面底部附近调用fancybox.js。
3. 最后，您要在其后调用另一个jquery.js。

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

Answer 5

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

之所以需要这样做，是因为Fancybox在调用模式窗口时会复制ID！

非常感谢大家的帮助！