上一个和下一个按钮不起作用
[英]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.