Question

我有以下JavaScript函数

function headerBanner(){
    var current = $('.bannerImages img:nth-child('+bannerIndex+')').css('display', 'none');
    if(bannerIndex== $('.bannerImages img').size()){
        bannerIndex= 1;
    }else{
        bannerIndex= (bannerIndex*1)+1;
    }
    var next =  $('.bannerImages img:nth-child('+bannerIndex+')').css('display', 'block');
}

在地球上的每个浏览器中，除了IE（8,7或更少）之外，上面的代码工作正常。在Internet Explorer中，它正在经历它并且没有任何效果。我已经在函数的每一行都设置了警报，即使在IE中，它们都会触发，但横幅根本不会改变。有什么理由说明为什么会这样吗？

此功能附带的HTML如下：

<div class='bannerImages'>
    <img src="FirstImage.jpg" />
    <img src="SecondImage.jpg" />
    <img src="ThirdImage.jpg" />
</div>

Answer 1

尝试在IE8开发人员工具中使用脚本调试器并输入一些断点来检查bannerIndex的值。如果它可能不是一个数字你可能想要使用parseInt（）将它转换为数字和IsNaN（）以确保它是，而不是依靠算术运算来为你规范化。

Answer 2

我在hide()和show()找到的一件事是，有时候，如果将显示设置为none，show（）将无效。因此，我总是创建元素，然后在文档准备就绪时首先调用hide（0）。

另外，您是否检查$('.bannerImages img:nth-child('+bannerIndex+')')的长度以确保它不是0？

最后，$('.bannerImages img').size()不是1，对吧？如果$('.bannerImages img').size()为1而bannerIndex为1则有意义，那么当它headerBanner();

时它不会改变任何内容

ps：我确定你不会犯一些简单的错误，例如bannerIndex是从0开始而不是1 ...

哦，顺便说一下，IE上有一个firebug，你需要在标题中包含一个脚本

Answer 3

试试这个：

DEMO：http://jsbin.com/ipudo/4

$(function(){
    $('.bannerImages img:gt(0)').hide();
    setInterval(function(){
      $('.bannerImages :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.bannerImages');}, 
      3000);
});

IE JavaScript之谜

3 个答案: