Question

我试图在我的项目中模拟Google图像预览。我想我几乎就在那里，但有些事情我很难实现。

因此图像查看器应执行以下操作：

点击缩略图会打开右侧的预览面板在下面并关闭来自其他行的其他预览面板。关闭其他面板并打开当前面板需要滑动过渡。
单击相同的缩略图将关闭预览面板。
点击＆＃34; X＆＃34;也将关闭预览面板。
打开来自同一行的另一个缩略图不会执行任何打开/关闭操作，只会交换内容。

到目前为止，我的成就是：

正在部分工作 - 因为它只会为slideDown（）第一个预览面板，无法通过幻灯片切换打开/关闭了。而且我不确定其他小组是如何关闭的 - 我还没有任何实施方案。
我无法将这项工作与所有其他条件结合在一起。我尝试使用已触发缩略图的ID并将该ID分配给预览面板，然后如果它们匹配，请关闭预览面板，但它会同时打开/关闭，而不是点击在我之后切换。
工作正常。
虽然我不能100％确定使用oldIndex的方法，但确实可以。

这是您使用的JS Fiddle，其中包含以下脚本。

$.videoWatch = function(element) {
  this.$element = $(element);
  this.init();
};
var oldIndex = -1;

$.videoWatch.prototype = {

  init: function() {

    this.$openLinks = this.$element.find(".open");
    this.$closeLinks = this.$element.find(".close");
    this.open();
    this.close();
  },

  _getContent: function(element) {
    var $parent = element.parent(),
      title = $parent.data('title');

    return {
      title: title
    }
  },

  open: function() {
    var self = this;

    self.$openLinks.on("click", function(e) {
      e.preventDefault();

      var $a = $(this),
        content = self._getContent($a),
        $li = $a.parents("li"),
        $title = $(".title");

      $title.text(content.title);

      $li.append($(".preview"));

      var $preview = $li.find(".preview");

      if (!($li.index() == oldIndex)) {
        $preview.slideDown('fast');
        oldIndex = $li.index();
      }
    });
  },
  close: function() {
    this.$closeLinks.on("click", function(e) {
      e.preventDefault();
      $(this).parent().slideUp('fast');
            oldIndex = -1;
    });
  }
};

$(function() {
  var watch = new $.videoWatch("ul");
});

Answer 1

很好的演示，但我不确定你的问题是什么。正如你所说，你对如何完成＃1和＃2

的期望不明确

请看 GNU GCC documentation 用于演示

完成＃1，在显示之前重新隐藏第一个预览

 if (!($li.index() == oldIndex)) {
     $preview.hide(); // add this line
     $preview.slideDown('fast');

完成＃2，不确定如何不使用hax，不得不存储图形ID并在单击相同的时隐藏，然后在id不同时重新显示

  else{
    var figureId = $a.parent()[0].id; 
    if  ( oldFigureId == figureId ){
      $preview.slideUp('fast');
      oldFigureId = -1;
    }else{
      $preview.slideDown('fast');
      oldFigureId = figureId;
    }

  }

我对使用oldIndex，oldFigureId等的hax不确定它不干净。

Answer 2

1 - 您的附加和滑动代码：

if (!($li.index() == oldIndex)) {
    $(".preview").slideUp('fast', function(){
        $li.append($(".preview"));

      var $preview = $li.find(".preview");
      $preview.slideDown('fast');
      oldIndex = $li.index();
    });
} else {
    $li.append($(".preview"));   
}

2 - 您可以存储当前的拇指ID并在执行任何操作之前检查它是否打开，如果是，请将其关闭

if (curID == $(this).parent().attr("id")) {
    $(".preview").slideUp('fast');
    oldIndex = -1;
    curID = "";
    return false;
} else {
    curID = $(this).parent().attr("id");
}

UPDATED FIDDLE

使用jQuery重现Google图像查看器

2 个答案: