jQuery-选项卡中的多个扩展画廊

Question

我试图让这个代码“ 显示由ROKO C. Buljan画廊 ” - http://jsbin.com/zariku/9/edit?html,css,js,output -在这里多个标签的工作：

http://codepen.io/anon/pen/QjyMwg

JS：

var $prvw = $('#preview'),
$gall = $('.gooGallery'),
$li   = $gall.find("li"),
$img  = $prvw.find("img"),
$alt1 = $prvw.find("h2"),
$alt2 = $prvw.find("p"),
$full =  $("<li />", {"class":"full", html:$prvw});
$li.attr("data-src", function(i, v){
  $(this).css({backgroundImage: "url("+v+")"});
}).on("click", function( evt ){
  var $el = $(this),
      d = $el.data(),
      $clone = $full.clone();
  $el.toggleClass("active").siblings().removeClass("active");
  $prvw.hide();
  $full.after($clone);
  $clone.find(">div").slideUp(function(){
    $clone.remove();
  });
  if(!$el.hasClass("active")) return;
  $img.attr("src", d.src);
  $alt1.text(d.alt);
  $alt2.text(d.title);
  $li.filter(function(i, el){
    return el.getBoundingClientRect().top < evt.clientY;
  }).last().after($full);
  $prvw.slideDown();
});
$(window).on("resize", function(){
  $full.remove();
  $li.removeClass("active");
});

2nd选项卡工作正常，但是，当我尝试打开第一个选项卡时，div不在正确的位置显示。

谁能帮我一个提示吗？

Answer 1

您正在尝试对两个画廊使用相同的预览div。 尝试使用2个预览。 我认为最快的方法是对这样的事情进行处理（警告，这有点丑陋）：

var i = 1;
$('.gooGallery').each(function() {
    var $gall = $(this);
    var $prvw = $('#preview' + i); i = i+1;
    var $li = $gall.find("li")
    var $img = $prvw.find("img")
    var $alt1 = $prvw.find("h2")
    var $alt2 = $prvw.find("p")
    var $full = $("<li />", {
            "class" : "full",
            html : $prvw
        });

    $li.attr("data-src", function (i, v) {
        $(this).css({
            backgroundImage : "url(" + v + ")"
        });
    }).on("click", function (evt) {
        var $el = $(this),
        d = $el.data(),
        $clone = $full.clone(true);
        $el.toggleClass("active").siblings().removeClass("active");
        $prvw.hide();
        $full.after($clone);
        $clone.find(">div").slideUp(function () {
            $clone.remove();
        });
        if (!$el.hasClass("active"))
            return;
        $img.attr("src", d.src);
        $alt1.text(d.alt);
        $alt2.text(d.title);
        $li.filter(function (i, el) {
            return el.getBoundingClientRect().top < evt.clientY;
        }).last().after($full);
        $prvw.slideDown();
    });
    $(window).on("resize", function () {
        $full.remove();
        $li.removeClass("active");
    });
});

然后修改预览div

<div id="preview1" class='preview'>
  <img src="//placehold.it/300x180/369">
  <div><h2></h2><p></p></div>
</div>
<div id="preview2" class='preview'>
  <img src="//placehold.it/300x180/369">
  <div><h2></h2><p></p></div>
</div>

以为它看起来很怪异，所以扔进了必要的CSS更改：

.preview{
  display:none;
}
.preview > *{
  float:left;
    margin:3%;
}
.preview img{
  max-width:100%;
}