Question

我正在尝试将此代码“Reveal gallery by Roko C. Buljan” - http://jsbin.com/zariku/9/edit?html,css,js,output - 在此处的多个标签中使用：

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");
});

第二个标签工作正常，但是，当我尝试打开第一个标签时，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%;
}

jQuery - 标签中的多个展开图库

1 个答案: