如何定位下一张要显示的图像？

Question

我有一个显示图像的画廊，还需要导航到下一张和上一张图像。我真的不知道如何让它们工作。

我的工作结构在this fiddle。

我需要让它工作，这样当我点击next 时它会打开下一张图片，当我按下prev 时它会打开上一张图片。

Answer 1

我认为您应该将selected 类名应用于当前视图中的图像。

单击“下一步”按钮后，将所选类移动到下一个元素，如下所示：

$('.selected').removeClass('selected').next().addClass('selected');

这样您一次只跟踪一个元素，并且可以显示该特定元素。

在您的getNext 函数中，x.length === 0（它是空的）因为它试图在this 中查找.popup_img，而this 是被点击的按钮。

function getNext(){
  debugger;
    var x = jQuery(this).find('.popup_img');
  jQuery('.popup_img').hide();  
  jQuery('.popup_img').next('.popup_img').show();
    
  console.log(x);
}

编辑：这里改进了 next 和 prev 功能：

function getNext() {
  var parent = jQuery(this).closest('.gallery-box-file');
  var currentImg = parent.find('.popup_img');
  var nextParent = parent.next();

  if (nextParent.length) {
    currentImg.hide();
    nextParent.find('.popup_img').show();
  }
}

function getPrev() {
  var parent = jQuery(this).closest('.gallery-box-file');
  var currentImg = parent.find('.popup_img');
  var nextParent = parent.prev();

  if (nextParent.length) {
    currentImg.hide();
    nextParent.find('.popup_img').show();
  }
}

http://jsfiddle.net/6Q4Va/5/