【问题标题】:need help with jquery selectors需要有关 jquery 选择器的帮助
【发布时间】:2010-04-02 03:59:16
【问题描述】:

我有这样的代码:

<ul class="gallery_demo_unstyled">
    <li class="active"><img src='001.jpg' /></li> 
    <li><img src='002.jpg' /></li> 
    <li><img src='003.jpg' /></li> 
    <li><img src='004.jpg' /></li> 
    <li><img src='005.jpg' /></li> 
    <li><img src='006.jpg' /></li> 
</ul> 

<div class="Paginator"> 
    <a href="../2/" class="Prev">&lt;&lt;</a> 
    <a href="../1/">1</a> 
    <a href="../2/">2</a> 
    <span class="this-page">3</span> 
    <a href="../4/">4</a> 
    <a href="../5/">5</a> 
    <a href="../4/" class="Next">&gt;&gt;</a> 
</div> 

<div class="Albums"><div class="AlbumsMenu">
<p><b>ALBUMS</b></p>
    <p><a href="../../blackandwhite/1/" >blackandwhite</a></p>
    <p><a href="../../color/1/" class='this-page'>>>color</a></p>
    <p><a href="../../film/1/" >film</a></p>
    <p><a href="../../digital/1/" >digital</a></p>
    <p><a href="../../portraits/1/" >portraits</a></p>
</div></div>  

...和一些 JavaScript/jQuery 允许循环通过图像(最顶部的 li 元素)返回到最后一个图像之后的第一个图像:

$$.nextSelector = function(selector) {
return $(selector).is(':last-child') ?
       $(selector).siblings(':first-child') :
       $(selector).next();

};

当前页面始终是“this-page”类(在我的情况下为 span 或 p,但如有必要我可以更改)。

问题:我应该在我的代码中进行哪些更改以使其在最后一张图片之后转到下一页,而不是一遍又一遍地循环浏览页面,然后在最后一页之后转到下一张专辑?以及第一张专辑第一页上最后一张最后一张图片的第一张图片(或者只是停在那里 - 真的不在乎)?

【问题讨论】:

  • 您如何更新图像列表以及画廊内的页面?是否有 ajax 请求在打开新页面时更新 ul. gallery_demo_unstyled,在打开新专辑时更新 div.AlbumsMenu
  • @anurag:它是 lomoportfolio.com/trunk/…> 脚本。我正在通过 django 生成带有图像列表、页码和专辑链接的 html - 每个专辑页面一个 html,并且在一页内 [li class="active"] 用于通过单击大图像动态更改一张图像.演示在这里:例如lomoportfolio.com/strangers.html,但现在它在一页内循环。我希望它转到下一页,然后是页面上最后一张图片之后的下一张专辑。

标签: javascript jquery jquery-selectors


【解决方案1】:

类似这样的:

function nextImage()
{
    var li = $('#gallery_demo_unstyled li.active');

    if (li.is(':last-child')) {
        nextPage();
    } else {
        li.removeClass('active');
        li.next().addClass('active');
    }
}

function nextPage()
{
    var next = $('div.Paginator a.Next');

    if (next.length == 0) {
        nextAlbum();
    } else {
        window.location = next.attr('href');
    }
}

function nextAlbum()
{
    var this_album = $('div.AlbumsMenu p a.this-name');
    var p = this_album.parent();

    if (p.next().length == 0) {
        return;
    }

    window.location = p.next().children('a').attr('href');
}

【讨论】:

  • 为了让它工作,它需要返回选择器而不是真正做所有的魔法。会考虑怎么修改。不过谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-02-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-03-07
  • 2011-05-09
相关资源
最近更新 更多