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

Question

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

我的工作结构在this fiddle .

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

Answer 1

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

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

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

通过这种方式，您可以一次准确地跟踪一个元素，并可以显示该特定元素。

在你的 getNext 函数中，x.length === 0 (它是空的)因为它试图在 中找到 .popup_img >this，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/