修改

Question

在此页面上：http://koncordia.marketingassociates.com/19892arc/

我有一个幻灯片，我创建了自定义上一个/下一个链接。您在页面上进行的每个选择都会向前推进一个幻灯片。顶部的进度条允许您单击上一张幻灯片，并根据需要跳回多个（例如，您可以从步骤4或步骤1开始）。

这个多步跳转在所有当前主流浏览器中运行良好，但客户端使用IE9，这是我不明白问题根源的地方。

以下是本期的相关方法。为了模仿用户跳回一张或多张幻灯片，我根据需要多次{em} simulatePrevClick（）进行for loop次迭代;它并不性感，但它确实有效。

问题出现在IE9的初始传递中。控制台为第一次传递吐出“未定义”，但是对于所有其他浏览器（包括IE 10和11），它都是0，这是正确的。如果我在循环中删除方法调用，迭代工作完美，所以它与.click（）事件或调用方法的方式有关，但我不知道是什么。

无论如何，无论他们点击多少次，IE9都会显示前一张幻灯片;如果进度条在此实例中单击了多个，则它们将不同步。未定义的结果也不会显示为错误。

    //Highlight the right number of progress buttons
    highlightProgressBar: function( slideNumber ) {
        $(".btn-progress").attr('disabled', 'disabled').removeClass('active'); //Disabled all
        $("#progress-wrapper a:lt(" + slideNumber + ")").removeAttr('disabled'); //Disable select number
        $("#progress-wrapper a:eq(" + (slideNumber - 1) + ")").addClass('active'); //Add active to the specified button clicked
    },

    simulateNextClick: function () {
        //The value of this must match what the responsiveslides function creates for the prev/next buttons (seen when you inspect element)
        $(".transparent-btns_nav.transparent-btns1_nav.next").click();  
    },

    simulatePrevClick: function () {
        //The value of this must match what the responsiveslides function creates for the prev/next buttons (seen when you inspect element)
        $(".transparent-btns_nav.transparent-btns1_nav.prev").click();
    },

    toggleProgressBar: function( clickedSlideNumber, activeSlideNumber ) {
        var numSlides = activeSlideNumber - clickedSlideNumber;
        for (var i=0; i < numSlides; i++) { //Anticipate user may click more than one step back
            this.simulatePrevClick();
            console.log(i); // **shows "undefined" on first pass in IE9 only**
        }

        this.highlightProgressBar(clickedSlideNumber);
    }

Answer 1

尝试将var i = 0声明移出循环。

var i = 0;
for (; i < numSlides; i++) {}

这应该发生真的很奇怪。

Answer 2

这只是一个猜测，但我查看了其余的源代码，并且可能是因为在您实际实现toggleProgressBar函数时问题的根源可能是由于此区域：< / p>

$(".btn-progress").click(function() {
    var currentSlideID = $("#progress-wrapper").find('a.active').attr('id').split("-");
    var clickedSlideID = $(this).attr('id').split("-");
    slideFn.toggleProgressBar( clickedSlideID[1], currentSlideID[1] );
});

如果我看对了，你的toggleProgressBar想要接受两个号码。但是，你传递的是字符串文字：

slideFn.toggleProgressBar( "2", "1" );

ID属性以字符串形式输出，不是数字。我刚刚在Chrome中对以下内容进行了测试，结果如下：

"2" - "1" === 1 //true

这是因为我猜V8（Chrome的JS引擎）将两个字符串文字强制转换为数字。但是，（虽然我还没有测试过），这告诉我IE可能没有强制将两个字符串强制转换成数字（就像我说的那样，我不知道这是事实，但这可能是你可能会尝试的调试）。试试这个，看看它是否有任何影响：

//first option

slideFn.toggleProgressBar( +clickedSlideID[1], +currentSlideID[1] );
//the + sign will typecast your strings into numbers


//second option

slideFn.toggleProgressBar( parseInt(clickedSlideID[1]), parseInt(currentSlideID[1]) );

但是，根据我的经验，parseInt运行速度比使用+将字符串强制转换为数字要慢一点。

IE使用Chakra JS引擎，我相信它遵循ECMAScript 3的标准，该标准是从1999年开始的。我没有阅读标准，但值得考虑它与问题有关的可能性。

修改

这是你的问题：

$("#progress-wrapper").find('a.active') ==> []

第一次，没有a.active元素。因此，每当您尝试在空数组上调用split时，它都会抛出TypeError。

您需要先提供.btn-progress课程active，因为第一次，您的第一个.btn-progress看起来像这样：

<a href="javascript://" class="btn btn-progress btn-progress-one btn-xs" id="step-1" role="button">1</a>

没有active课程。每当您点击.btn-progress时，只有后续的active元素会收到课程.btn-continue。你的第一个永远不会。因此，clickedSlideID[1]和currentSlideID[1]在第一次出现时未定义。它可能在IE9中断，因为IE9不理解i < undefined，但是其他更现代的浏览器可能会继续并执行。

在代码开头的某个地方，你需要做这样的事情：

$('.btn-progress').eq(0).addClass('active');

我刚刚在你网页的控制台上试过这个，它运行得很好。在我将active课程添加到.btn-progress currentSlideID[1]后，1现在是undefined，而不是{{1}}。

对于初始传递，IE9中的循环索引未定义

2 个答案:

修改