上一個和下一個按鈕不起作用
[英]Previous and next buttons not working
問題描述
有人可以解釋為什么這在Firefox中有效而在Chrome中不有效嗎？ 關於出現在左右下角的綠色按鈕。 左邊應該到2008，右邊應該到2010。這在Firefox中有效，但在Chrome中不起作用。 在Chrome中，左轉到2007，右轉到2015。
根據當前URL和div列表，按鈕的url會更改。
編輯：
在此示例中，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&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=25329364189_99168f141a_o.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2016"></div>
<div id="Walk2015" data-target="http://herenloop.nl/2015" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f2015.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2015"></div>
<div id="Walk2014" data-target="http://herenloop.nl/2014" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f14.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2014"></div>
<div id="Walk2013" data-target="http://herenloop.nl/2013" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f13.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2013"></div>
<div id="Walk2012" data-target="http://herenloop.nl/2012" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f12.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2012"></div>
<div id="Walk2011" data-target="http://herenloop.nl/2011" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f11.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2011"></div>
<div id="Walk2010" data-target="http://herenloop.nl/2010" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f10.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2010"></div>
<div id="Walk2008" data-target="http://herenloop.nl/2008" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f08.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2008"></div>
<div id="Walk2007" data-target="http://herenloop.nl/2007" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f07.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2007"></div>
<div id="Walk2006" data-target="http://herenloop.nl/2006" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f06.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2006"></div>
<div id="Walk2005" data-target="http://herenloop.nl/2005" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f05.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2005"></div>
<div id="Walk2004" data-target="http://herenloop.nl/2004" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f04.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2004"></div>
<div id="Walk2003" data-target="http://herenloop.nl/2003" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f03.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2003"></div>
<div id="Walk2002" data-target="http://herenloop.nl/2002" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f02.JPG&PortalID=8&q=1&s=1" data-title="Herenloop2002"></div>
<div id="Walk2001" data-target="http://herenloop.nl/2001" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2fcourtstgeorge_h.jpg&PortalID=8&q=1&s=1" data-title="Herenloop2001"></div>
<div id="Walk2000" data-target="http://herenloop.nl/2000" data-img="/DesktopModules/DnnForge - NewsArticles/ImageHandler.ashx?Width=100&Height=100&HomeDirectory=%2fPortals%2f8%2f&FileName=Afbeeldingen%2fAlbumomslagen%2f00.jpg&PortalID=8&q=1&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。
謝謝
1 個解決方案
解決方案1
0 已采納 2016-12-07 08:38:50
它在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
})
SwiperJS - 上一個和下一個按鈕不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.