上一个和下一个按钮不起作用

Question

Can someone explain why this works in Firefox and not in Chrome? It's about the green buttons that appear in the left and right bottom corners. Left should go to 2008 and right should go to 2010. This works in Firefox but not in Chrome. In Chrome left goes to 2007 and right to 2015.

Based on the current URL and a list of div's, the url's of the buttons change.

http://herenloop.nl/2009

Edit:

In this example the url is http://herenloop.nl/2009 but can also be /2001 or /2016.

With this url, my hidden div list of url is (observe that /2009 is not present in the list):

<div id="WalkingYears" style="position: absolute; left: -9999;">
<div id="Walk2016" data-target="http://herenloop.nl/2016" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=25329364189_99168f141a_o.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2016"></div>
<div id="Walk2015" data-target="http://herenloop.nl/2015" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f2015.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2015"></div>
<div id="Walk2014" data-target="http://herenloop.nl/2014" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f14.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2014"></div>
<div id="Walk2013" data-target="http://herenloop.nl/2013" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f13.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2013"></div>
<div id="Walk2012" data-target="http://herenloop.nl/2012" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f12.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2012"></div>
<div id="Walk2011" data-target="http://herenloop.nl/2011" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f11.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2011"></div>
<div id="Walk2010" data-target="http://herenloop.nl/2010" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f10.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2010"></div>
<div id="Walk2008" data-target="http://herenloop.nl/2008" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f08.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2008"></div>
<div id="Walk2007" data-target="http://herenloop.nl/2007" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f07.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2007"></div>
<div id="Walk2006" data-target="http://herenloop.nl/2006" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f06.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2006"></div>
<div id="Walk2005" data-target="http://herenloop.nl/2005" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f05.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2005"></div>
<div id="Walk2004" data-target="http://herenloop.nl/2004" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f04.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2004"></div>
<div id="Walk2003" data-target="http://herenloop.nl/2003" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f03.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2003"></div>
<div id="Walk2002" data-target="http://herenloop.nl/2002" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f02.JPG&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2002"></div>
<div id="Walk2001" data-target="http://herenloop.nl/2001" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2fcourtstgeorge_h.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2001"></div>
<div id="Walk2000" data-target="http://herenloop.nl/2000" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&amp;Height=100&amp;HomeDirectory=%2fPortals%2f8%2f&amp;FileName=Afbeeldingen%2fAlbumomslagen%2f00.jpg&amp;PortalID=8&amp;q=1&amp;s=1" data-title="Herenloop2000"></div>
</div>

This is the script I use for this:

var xlocation = window.location.href.match(/(\/[a-zA-Z]+\/)|(\d+)/);
$el = $('#WalkingYears div[id^=Walk]'),
$elSorted = $el.slice().sort(sorter)
prev = jQuery.grep($elSorted,function(el,i){
    return $(el).attr('data-title').replace(/^\D+/g, '')*1<xlocation[0]*1
})
next = jQuery.grep($elSorted,function(el,i){
    return $(el).attr('data-title').replace(/^\D+/g, '')*1>xlocation[0]*1
})
var sorter = function(a,b){
a = $(a).attr('data-title').replace(/^\D+/g, '')*1,
b = $(b).attr('data-title').replace(/^\D+/g, '')*1
return b-a
}

$('#balk-prev-btn').prop('href',$(prev).first().attr('data-target'));
$('#balk-prev-btn').prop('title',$(prev).first().attr('data-title'));
$('#balk-prev-btn img').prop('src',$(prev).first().attr('data-img'));
$('#balk-prev-btn img').prop('alt',$(prev).first().attr('data-title'));
$('#balk-next-btn').prop('href',$(next).last().attr('data-target'));
$('#balk-next-btn').prop('title',$(next).last().attr('data-title'));
$('#balk-next-btn img').prop('src',$(next).last().attr('data-img'));
$('#balk-next-btn img').prop('alt',$(next).last().attr('data-title'));

function setNextPrev() {
    var dataPrevLink = $('#balk-prev-btn').attr('href');
    var dataNextLink = $('#balk-next-btn').attr('href');
    if (dataPrevLink != '') {
        $('#dock .prev-btn').stop().delay(2000).animate({
            'margin-left': 0
        }, {duration: 700, easing: 'easeOutBounce'});
    } else {
        $('#dock .prev-btn').stop().delay(2000).animate({
            'margin-left': -100
        }, {duration: 700, easing: 'easeOutBounce'});
    }
    if (dataNextLink != '') {
        $('#dock .next-btn').stop().delay(2000).animate({
            'margin-right': 0
        }, {duration: 700, easing: 'easeOutBounce'});
    } else {
        $('#dock .next-btn').stop().delay(2000).animate({
            'margin-right': -100
        }, {duration: 700, easing: 'easeOutBounce'});
    }
}
setNextPrev();

The script takes the current url, looks at the list of other url's in the hidden div list, sorts them and picks a prev an next url, some other data is attached to the buttons like title and image.

It works in Firefox but not in Chrome.

Thank you

Answer 1

The fact it didn't work correct in Chrome had to do with the order of the script. I placed the sorter function like below and it worked.

var sorter = function(a,b){
var a = $(a).attr('data-title').replace(/^\D+/g, '')*1,
b = $(b).attr('data-title').replace(/^\D+/g, '')*1
return b-a
}
$el = $('#WalkingYears div[id^=Walk]');
$elSorted = $el.slice().sort(sorter);
prev = jQuery.grep($elSorted,function(el,i){
return $(el).attr('data-title').replace(/^\D+/g, '')*1<xlocation[0]*1
})
next = jQuery.grep($elSorted,function(el,i){
return $(el).attr('data-title').replace(/^\D+/g, '')*1>xlocation[0]*1
})