For 循环中的 Javascript If 语句适用于 Chrome 和 Safari，但不适用于 Firefox

Question

作为 TeamTreehouse.com 竞赛学习过程的一部分，我正在学习编码和构建图片库。

这是代码:http://jsfiddle.net/kylenoble/8Wf8r/以及运行代码时的结果:http://jsfiddle.net/kylenoble/8Wf8r/embedded/result/ .

我遇到的问题是单击嵌套在 .item div 中的 .i div。在我的头撞墙几个小时后，我将它缩小到下面的 if 语句在 Chrome 和 Safari 中触发但在 Firefox 中不触发。

具体代码如下:

    //Loops through the infoUrl's and populates the info button with
    //infoUrl that matches the imageUrl

    for(i = 0, len = (picturesList.length - 1); i <= len; i ++) {
        var infoUrl = picturesList[i].infoUrl;
        var imageUrl = picturesList[i].imageUrl;
        var displayImage = 'url(' +imageUrl+ ')';
        var currentItemUrl = ($(this).css('background-image'));

        //Matches the imageUrl in the displayImage var with the  
        //corresponding infoUrl and opens the matched infoUrl when 
        //the 'info' button is clicked. 

        if (displayImage === currentItemUrl) {
            console.log('true');
            $('.i').click( function(event) {
                window.open(infoUrl);
                event.stopImmediatePropagation();
            });
        break;
        }
    }

我似乎不明白为什么 if 语句不会在 Firefox 中触发，但会在 Chrome 和 Safari 中触发。非常感谢您可能提供的任何帮助，如果我在这个问题的任何一点上都不清楚，我深表歉意。

谢谢!

Answer 1

我已经检查了 Firefox 中的调试器，它显示了 displayImage 和 currentItemUrl 之间的差异。

currentItemUrl: "url("http://media.nara....ges/16/7/16-0651a.gif")"

displayImage: "url(http://media.nara.g...ges/14/14/14-1336a.gif)"

注意引号。我不确定为什么，但 Firefox 似乎以不同的方式返回 css 属性。