Question

在隐藏列表中，我有一个包含此数据的变量列表（在此示例中 www.domain.com/2009 是当前网址）：

＆＃13;

<ul id="WalkingYears" style="visibility: hidden; display:none;">
    <li id="Walk2011"><a href="http://domain.com/2011" title="2011"><img src="some-imga.jpg"></a></li>
    <li id="Walk2010"><a href="http://domain.com/2010" title="2010"><img src="some-imgs.jpg"></a></li>
    <li id="Walk2008"><a href="http://domain.com/2008" title="2008"><img src="some-imgf.jpg"></a></li>
    <li id="Walk2007"><a href="http://domain.com/2007" title="2007"><img src="some-imgg.jpg"></a></li>
    <li id="Walk2006"><a href="http://domain.com/2006" title="2006"><img src="some-imgh.jpg"></a></li>
    <li id="Walk2005"><a href="http://domain.com/2005" title="2005"><img src="some-imgj.jpg"></a></li>
    <li id="Walk2004"><a href="http://domain.com/2004" title="2004"><img src="some-imgk.jpg"></a></li>
    <li id="Walk2003"><a href="http://domain.com/2003" title="2003"><img src="some-imgl.jpg"></a></li>
    <li id="Walk2002"><a href="http://domain.com/2002" title="2002"><img src="some-imgz.jpg"></a></li>
    <li id="Walk2001"><a href="http://domain.com/2001" title="2001"><img src="some-imgx.jpg"></a></li>
</ul>

＆＃13;

上面的列表是自动生成的，如果我喜欢，我可以改变它;例如：

＆＃13;

<div id="Walk2011" data-target="http://domain.com/2011" data-img="some-imga.jpg" data-title="2011"></div>
<div id="Walk2010" data-target="http://domain.com/2010" data-img="some-imgs.jpg" data-title="2010"></div>
<div id="Walk2008" data-target="http://domain.com/2008" data-img="some-imgd.jpg" data-title="2008"></div>
<div id="Walk2007" data-target="http://domain.com/2007" data-img="some-imgf.jpg" data-title="2007"></div>
<div id="Walk2006" data-target="http://domain.com/2006" data-img="some-imgg.jpg" data-title="2006"></div>
<div id="Walk2005" data-target="http://domain.com/2005" data-img="some-imgh.jpg" data-title="2005"></div>
<div id="Walk2004" data-target="http://domain.com/2004" data-img="some-imgj.jpg" data-title="2004"></div>
<div id="Walk2003" data-target="http://domain.com/2003" data-img="some-imgk.jpg" data-title="2003"></div>
<div id="Walk2002" data-target="http://domain.com/2002" data-img="some-imgl.jpg" data-title="2002"></div>
<div id="Walk2001" data-target="http://domain.com/2001" data-img="some-imgz.jpg" data-title="2001"></div>

＆＃13;

您会看到当前网址（www.domain.com/2009）未显示在此列表中。

现在我想根据当前网址使用上面提到的值（title，href，image src）来填充prev和下一个导航：

＆＃13;

<a href="http://domain.com/2008" title="2008" id="balk-prev-btn" class="prev-btn left">
    <img src="some-imgd.jpg" alt="2008">
    <span class="icon"></span>
</a>
<a href="http://domain.com/2010" title="2010" id="balk-next-btn" class="next-btn right">
    <img src="some-imgs.jpg" alt="2010">
    <span class="icon"></span>
</a>

＆＃13;

我想我需要

首先找出当前的网址
然后将其与列表中的数据进行比较
以某种方式指出上一页和下一页

此外，当选择某个变量（助行器的名称）时，列表中的链接将不同，并且URL将 www.domain.com/walkername/2009 ：

＆＃13;

<div id="Walk2011" data-target="http://domain.com/walkername/2011" data-img="some-imga.jpg" data-title="2011"></div>
<div id="Walk2010" data-target="http://domain.com/walkername/2010" data-img="some-imgs.jpg" data-title="2010"></div>
<div id="Walk2008" data-target="http://domain.com/didnotwalk/2008" data-img="some-imgd.jpg" data-title="2008"></div>
<div id="Walk2007" data-target="http://domain.com/didnotwalk/2007" data-img="some-imgf.jpg" data-title="2007"></div>
<div id="Walk2006" data-target="http://domain.com/walkername/2006" data-img="some-imgg.jpg" data-title="2006"></div>
<div id="Walk2005" data-target="http://domain.com/didnotwalk/2005" data-img="some-imgh.jpg" data-title="2005"></div>
<div id="Walk2004" data-target="http://domain.com/didnotwalk/2004" data-img="some-imgj.jpg" data-title="2004"></div>
<div id="Walk2003" data-target="http://domain.com/walkername/2003" data-img="some-imgk.jpg" data-title="2003"></div>
<div id="Walk2002" data-target="http://domain.com/didnotwalk/2002" data-img="some-imgl.jpg" data-title="2002"></div>
<div id="Walk2001" data-target="http://domain.com/didnotwalk/2001" data-img="some-imgz.jpg" data-title="2001"></div>

＆＃13;

在这种情况下，prev和next按钮应该只显示带有walker名称的链接:)并且应该如下所示：

＆＃13;

<a href="http://domain.com/walkername/2006" title="2006" id="balk-prev-btn" class="prev-btn left">
    <img src="some-imgg.jpg" alt="2006">
    <span class="icon"></span>
</a>
<a href="http://domain.com/walkername/2010" title="2010" id="balk-next-btn" class="next-btn right">
    <img src="some-imgs.jpg" alt="2010">
    <span class="icon"></span>
</a>

＆＃13;

有人能帮助我吗？ TNX！

Answer 1

好的，如果你有这个布局，这个脚本应该完成工作

<div id="Walk2011" data-target="http://domain.com/walkername/2011" data-img="some-imga.jpg" data-title="2011"></div>
<div id="Walk2010" data-target="http://domain.com/walkername/2010" data-img="some-imgs.jpg" data-title="2010"></div>
<div id="Walk2008" data-target="http://domain.com/didnotwalk/2008" data-img="some-imgd.jpg" data-title="2008"></div>
<div id="Walk2007" data-target="http://domain.com/didnotwalk/2007" data-img="some-imgf.jpg" data-title="2007"></div>
<div id="Walk2006" data-target="http://domain.com/walkername/2006" data-img="some-imgg.jpg" data-title="2006"></div>
<div id="Walk2005" data-target="http://domain.com/didnotwalk/2005" data-img="some-imgh.jpg" data-title="2005"></div>
<div id="Walk2004" data-target="http://domain.com/didnotwalk/2004" data-img="some-imgj.jpg" data-title="2004"></div>
<div id="Walk2003" data-target="http://domain.com/walkername/2003" data-img="some-imgk.jpg" data-title="2003"></div>
<div id="Walk2002" data-target="http://domain.com/didnotwalk/2002" data-img="some-imgl.jpg" data-title="2002"></div>
<div id="Walk2001" data-target="http://domain.com/didnotwalk/2001" data-img="some-imgz.jpg" data-title="2001"></div>

基于jQuery的脚本：

var xlocation =  "http://www.domain.com/walkername/2009".match(/(\/[a-zA-Z]+\/)(\d+)/); //sorry for ugly regexp --> ["/walkername/2009", "/walkername/", "2009"], also here should be used window.location.href , but for example lets use static string;
        //find and filter only links which have 'walkername' in data-tagert
    $el = $('#WalkingYears div[id^=Walk]').filter(function(i,el){
        return $(el).attr('data-target').indexOf(xlocation[1]) > 0;
    }),
//sort if divs is scrambeled
    $elSorted = $el.sort(sorter);
    prev =  jQuery.grep($elSorted,function(el,i){
        return $(el).attr('data-title').replace(/^\D+/g, '')*1<xlocation[2]*1
    })
    next = jQuery.grep($elSorted,function(el,i){
        return $(el).attr('data-title').replace(/^\D+/g, '')*1>xlocation[2]*1
    })
    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
    }

    //ADD href to buttons...
    $('#balk-prev-btn').prop('href',$(prev).first().attr('data-target'))
    $('#balk-next-btn').prop('href',$(next).last().attr('data-target'))

如果当前页面是第一页或最后一页，您需要检查prevEl和NextEl是否仍然存在。您还需要查看用于解析url的regexp：）

使用jQuery

1 个答案: