0

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

这是图像加载的地方

<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>

查询

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");
});
});

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

4

1 回答 1

1

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

我建议您在单击的 li 上设置一个标志（使用一个类）以记住它是哪个，然后您可以从该元素使用.next()and ：.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 和 next 处理程序添加一些代码来执行某些操作。）

于 2013-02-23T11:47:26.440 回答