上一個和下一個按鈕不起作用

有人可以解釋爲什麼這可以在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

上一個和下一個按鈕不起作用

回答

相關問題