jquery 在单击的实例后查找下一个图像 [英] jquery find next image after the clicked instance

问题描述

我正在尝试设置一个图片库，您可以在其中单击拇指，然后您可以使用下一个和上一个按钮.我的问题是用户最初可以单击我需要检测的任何图像以及下一张或上一张图像的锻炼，并将显示 src 替换为下一张图像的 src.我只是想让下一个按钮先工作，因为前一个按钮的工作原理相同.我一直在尝试使用 .next() 但它真的让我感到困惑.

I'm trying to set up an image gallery where you can click a thumb and from that you can then use next and prev buttons. My issue is the user can initially click any image which I need to detect and the workout which the next or previous image will be and replace the display src with the src of the next image. I'm only trying to get the next button working first as the previous will work on the same principle. I have been trying to use the .next() but its really got me baffled.

对此的任何帮助都会很棒.

Any help with this would be great.

这是我所拥有的jsfiddle，下面是我写的jquery，问题是下一个按钮的底部:

Here's a jsfiddle of what I have and below is the jquery I've written, the problem is the bottom bit for the next button:

var numImgs = $('div.locationGallery .polaroidImage').length;
var prevImages = $('.polaroidImage').prevAll().length;
var thisImage;
var imageClicked;
var nextImage;
var nextImage;

$('.polaroidImage').click(function(){
    var prevImages = $(this.parentNode).prevAll().find('.polaroidImage').length;
    if(prevImages > 0){
        $('.prev').show();
    }else{
        $('.prev').hide();
    }
    if(prevImages == (numImgs - 1)){
        $('.next').hide();
    }else{
        $('.next').show();
    }
});

$(".thumb").click(function(){
      imageClicked = '';
      imageClicked = $(this).attr('src');
    $(".imageDisplay").find('img').remove();
    $(".imageDisplay").append("<img src='"+imageClicked+"' />")
});

$('.next').click(function(){
    nextImage = $('.imageContainer').next('img').attr('src');
    alert(nextImage);
});

推荐答案

这是一个使用上一个和下一个按钮的示例:http://jsfiddle.net/8FMsH/1/在拇指点击你需要保存当前图像:

Here is an example with working prev and next buttons: http://jsfiddle.net/8FMsH/1/ On thumb click you need to save the current image:

$(".thumb").click(function(){
  imageClicked = $(this);
  $(".imageDisplay").find('img').remove();
  $(".imageDisplay").append("<img src='"+imageClicked.attr('src')+"' />")
});

$('.next').click(function(){
 imageClicked.closest('.imageContainer').next().find('img').trigger('click');
});

$('.prev').click(function(){
 imageClicked.closest('.imageContainer').prev().find('img').trigger('click');
});

这篇关于jquery 在单击的实例后查找下一个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！