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

有人可以解释为什么这可以在Firefox中使用，而不是在Chrome中使用？这是关于出现在左下角和右下角的绿色按钮。左边应该去到2008年，右边应该去到2010年。这适用于Firefox，但不适用于Chrome。在Chrome中左转到2007年，直到2015年。上一个和下一个按钮不起作用

根据当前的URL和div列表，按钮的url会改变。

http://herenloop.nl/2009

编辑：

在这个例子中的URL是http://herenloop.nl/2009但也可以/ 2001或/ 2016。

以这样的URL，URL的我隐藏的div列表（观察/ 2009年没有出现在列表中）：

<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>

这是我使用这个脚本：

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();

该脚本获取当前网址，查看隐藏div列表中的其他网址列表，对它们进行排序并选取前一个网址，其他一些数据会附加到按钮上，如标题和图像。

它适用于Firefox，但不适用于Chrome。

谢谢

来源

2016-12-02 Keston Pollard

重现JSFiddle中的问题。 SO上的大多数人不会点击可怕的非现场链接 – WillardSolutions

请在此处添加有意义的代码和问题描述。请不要链接到需要修复的网站 - 否则，一旦问题得到解决，或者您链接到的网站无法访问，此问题将对未来的访问者失去任何价值。发布 [最小，完整和可验证示例（MCVE）]（http://stackoverflow.com/help/mcve）显示您的问题将帮助您获得更好的答案。欲了解更多信息，请参阅 [我网站上的某些内容不起作用。我可以只粘贴一个链接吗？]（http://meta.stackexchange.com/questions/125997/）谢谢！ – j08691

@EatPeanutButter我们有些人不会（不能）去JSFiddle。最好在问题本身中包含内容*，以便其他人可以在不离开SO的情况下重现问题。 –

它没有工作在Chrome正确的事实曾与脚本的顺序做。我像下面那样放置了分拣机功能，它工作正常。

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 
})

来源

2016-12-07 08:38:50

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

回答

相关问题