For循环中的Javas If语句可在Chrome和Safari中运行，但不能在Firefox中运行

Question

I am in the process of learning to code and building a picture gallery as part of the learning process for a TeamTreehouse.com contest.

Here is the code: http://jsfiddle.net/kylenoble/8Wf8r/ and the result when running the code: http://jsfiddle.net/kylenoble/8Wf8r/embedded/result/ .

The issue I am running into is clicking an .i div that is nested in an .item div. After hours of banging my head into a wall, I have narrowed it down to the if statement below triggering in Chrome and Safari but not triggering in Firefox.

Here is the specific code:

    //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;
        }
    }

I can't seem to figure out why the if statement won't trigger in Firefox but will in Chrome and Safari. I really appreciate any help you might be able to provide and I apologize if I've been unclear at any point in this question.

Thank you!

Answer 1

I've checked in the debugger in Firefox, and it's showing a difference between displayImage and currentItemUrl .

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

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

Note the quotes. I'm not sure why, but it seems Firefox returns the css property differently.