Question

我是jquery语言的新手，但我正在创建一个非常简单的图片库，只加载图库的第一个图像。用户需要单击缩略图才能查看图像。这是因为我为图库使用了一个大图像，因此它不必加载每个图像。现在我在创建下一个和上一个按钮时遇到了问题。

这是图片加载的地方

<div class="entry-content">
<div class="img-box">
<img id="img-preview" src="#" >
</div>
</div>

这是分页

<div class="paginate">  
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>

这是缩略图所属的地方

<ul id="related-category"> 
<li class="photo"><a href="#" ></a></li>
<li class="photo"><a href="#" ></a></li>
<li class="photo"><a href="#" ></a></li>
<li class="photo"><a href="#" ></a></li>
</ul>

JQUERY

jqu(document).ready(function(){

jqu("#related-category li a").click(function(){

    var largePath = jqu(this).attr("href");    
    jqu("#img-preview").attr({ src: largePath });
    return false;

});

    jqu("a.next").click(function(){
    jqu(" li.photo").next("a");
});
    jqu("a.prev").click(function(){
    jqu("li.photo").prev("a");
});
});

一直在寻找解决方案，但大多数滑块图像都是预加载滑块加载。我的没有。

感谢您提前帮助！

Answer 1

.next()和.prev()方法不会导致点击发生，它们会创建一个jQuery对象，该对象包含DOM中与当前元素相同级别的下一个或上一个元素。因此，jqu("li.photo").next("a")找不到任何内容，因为与li元素在同一级别没有锚点，并且在任何情况下"li.photo"都会选择所有的li元素。

我建议您在点击的li上设置一个标记（使用一个类）以记住它是哪一个，然后您可以使用中的.next()和.prev() 元素：

jqu("#related-category li a").click(function(){
    jqu("#related-category li").removeClass("selected");
    jqu(this).parent().addClass("selected");
    var largePath = jqu(this).attr("href");    
    jqu("#img-preview").attr({ src: largePath });
    return false;    
});

jqu("a.next").click(function(){
    jqu("li.selected").next().find("a").click();
});
jqu("a.prev").click(function(){
    jqu("li.selected").prev().find("a").click();
});

演示：http://jsbin.com/iruyap/1/edit

（注意：如果没有上一个或下一个项目，您可能希望向prev和下一个处理程序添加一些代码来执行某些操作。）

jquery下一个上一页非预载图像

1 个答案: