0

在我的标记中，我有这个空<ul>来保存我的缩略图：...

<ul class="slideSelectors">
</ul><!--   END ul="slideSelectors" -->

...我正在使用 jQuery 循环遍历一堆 .slide div 并生成缩略图：...

// GENERATE THE SLIDE SELECTORS [THUMBNAILS]
$('.slides .slide').each(function() {
    var ID = $(this).attr('id');
    var imgTag  = $(this).find('img').parent().html().split('meta"  -->')[1];
    var listItem = '<li><a href="#" title="'+ ID +'">'+imgTag+'</li>';
    //$('.slideSelectors').html(listItem); // loads only last list item, since .html() replaces all previous LIs
    //$('.slideSelectors').add(listItem); // NG in IE7, IE8
    $('.slideSelectors').append(listItem); // NG in IE7, IE8
});

...这是触发业务：

$('.slideSelectors').on('click', 'li a', function(){
    var selectorIx = parseInt($(this).closest('li').index(), 10);
    newSlide(selectorIx);
});

...所有这些都在 FF、Safari 中发挥了作用。

然而，IE7/8 似乎无法与 .append() 一起使用：缩略图图像被渲染（不可点击），但没有<li>标签和锚标签，这使得缩略图无法用作选择器。我已经提醒了 imgTag 和 listItem 变量，它们看起来是正确的（尽管图像标签未正确关闭，尽管在我的 .slide div 中是正确的）。使用 .prepend() 的结果相同，而 .html() 并不好（正如我在相关问题中所建议的那样），因为我处于 .each() 循环中，它只呈现最后一个缩略图。（我也在其他地方读到过，这可能与错误的 HTML 有关，但我的代码是有效的）

这似乎是一个已知的错误，但我还没有看到修复。除了添加另一个触发器选择器之外，我没有想法。谁能指出我的解决方案的方向？

提前谢谢了，

谢基

4

1 回答 1

1

在您的代码中

var listItem = '<li><a href="#" title="'+ ID +'">'+imgTag+'</li>';

应该

var listItem = '<li><a href="#" title="'+ ID +'">'+imgTag+'</a></li>';

您错过了结束</a>标签，其他浏览器比它更聪明，IE所以它可以工作，但IE不是那么聪明，所以您的缩略图在IE.

于 2012-09-04T02:51:20.783 回答