jQuery 选择下一个和上一个 img

Posted 2023-02-25

【中文标题】jQuery 选择下一个和上一个 img

【英文标题】：Jquery select next and prev img

【发布时间】：2014-05-16 12:53:56

【问题描述】：

我研究了一个小 jquery 函数，但我有点卡住了。我想要做的是当我单击下一个和上一个链接时，根据带有 class="clicked" 的 img 向我显示下一个和上一个 img。我知道我可以使用 find() 函数，但我真的不知道如何实现它。

html

            <div class="thumbs_img">
                <a href="#p" class="prev">Prev</a>
                <img src="images/single_slider1.png" class="gallerythumbnail">
                <img src="images/single_slider2.png" class="gallerythumbnail">
                <img src="images/single_slider3.png" class="gallerythumbnail">
                <img src="images/single_slider4.png" class="gallerythumbnail clicked">
                <img src="images/single_slider5.png" class="gallerythumbnail"> 
                <img src="images/single_slider6.png" class="gallerythumbnail"> 
                <img src="images/single_slider7.png" class="gallerythumbnail">
                <a href="#n" class="next">Next</a>
            </div>

Js

$(document).ready(function()         
    $('.gallerythumbnail').click(function()
        $('#homeprod').removeClass('clicked');
        $('.gallerythumbnail').removeClass('clicked');
        $(this).toggleClass('clicked');
    );

    $('.showimagediv').show();
    $('.gallerythumbnail').on('click', function() 
        var img = $('<img />', src    : this.src,
                                'class': 'fullImage'
                  );

        $('.showimagediv').html(img).show();
    );
);

CSS

.showimagediv 
    display: none;
    width: 100%;
    height: 474px;
    background-color: #000;

.gallerythumbnail
    margin-left: 5px;
    margin-right: 5px;
    width:80px; 
    height: 80px;
    cursor:pointer;

.slider_prod
    border: 2px solid #000;   

.thumbs_img
    margin-top: 10px;

.clicked outline: 2px solid #fdb900;
.fullImage
    width: 750px;
    height: 474px;

.prev
    background-image: url('images/arrow_left.png');
    background-position: center center;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-right: 25px;
    padding-top: 30px;
    padding-bottom: 35px;
    margin-right: 3px;

.next
    background-image: url('images/arrow_right.png');
    background-position: center center;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 35px;
    margin-left: 3px;

http://jsfiddle.net/7mUmK/

【问题讨论】：

请在此处包含任何相关代码和标记，以便保留信息。

我用目前得到的信息编辑了这篇文章。

【参考方案1】：

当您在第一张图片上并单击“上一张”或在最后一张图片上并单击“下一步”时不会挂起浏览器的解决方案

$('.next').click(function()
    if(!$(".clicked").is(".gallerythumbnail:last"))
    
        $('.clicked').next().click();
    
);
    $('.prev').click(function()
    if(!$(".clicked").is(".gallerythumbnail:first"))
    
        $('.clicked').prev().click();
    
);

DEMO

如果碰巧你确实希望它在最终情况下循环

$('.next').click(function()
    if(!$(".clicked").is(".gallerythumbnail:last"))
    
        $('.clicked').next().click();
    
    else
    
        $(".gallerythumbnail:first").click();
    
);
    $('.prev').click(function()
    if(!$(".clicked").is(".gallerythumbnail:first"))
    
        $('.clicked').prev().click();
    
    else
    
        $(".gallerythumbnail:last").click();
    
);

【讨论】：

+1 用于处理第一个/最后一个 img 中的错误。这应该是答案。

@JayBlanchard 添加了循环

【参考方案2】：

您可以分别在下一个/上一个点击按钮上触发.clicked元素的下一个/上一个图像元素点击。试试这个：

 $('.next').click(function()
  if($('.clicked').next().is(':last'))
    $('.clicked').next().click();
 );
 $('.prev').click(function()
  if($('.clicked').prev().is(':first'))
    $('.clicked').prev().click();
 );

Working Demo

【讨论】：

效果很好，除非您在第一张图像上并单击 Prev 或在最后一张图像上并单击 Next。然后你就疯了。

@PatrickQ：它应该以这种方式工作，除非 OP 希望它是循环的。

嗯……我不认为我会说“应该”在浏览器意识到您处于无限递归并自行停止之前锁定您的浏览器。我并不是说它“应该”围绕圆形循环，但它肯定不应该像它那样表现。

@PatrickQ 如果您不赞成 Milind 的回答，请按照您认为应该的方式写一篇。

@PatrickQ 我同意你的观点，如果你停在第一个/最后一个 img 并单击控制台会爆炸的按钮，我认为这不行。

【参考方案3】：

这里有一个小提琴http://jsfiddle.net/keypaul/7mUmK/28/

$(".thumbs_img  a").click(function(e)
    var c = $(this).attr('class');
    skipImg(c);
    e.preventDefault();
);


function skipImg(c)
    var sel = $('img.clicked'),
        l = $('.thumbs_img img').length,
        n;
    if( c == "next")
        n = $('.clicked').next();
        if(n.index() > l)
           n = $('.thumbs_img img').eq(0);
        
    else
        n = $('.clicked').prev();
        if(n.index() <= 0)
            n = $('.thumbs_img img').eq(l - 1);
        
    
    n.addClass('clicked');
    sel.removeClass('clicked');
   //here call a function to change big img