Question

我想在fancybox中获取clicked / shown元素的id。我试过“this.id”和“this.attr（”id“）” - 但它们都没有用。

$("a.lightbox_image").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'elastic',
            'speedIn': 600,
            'speedOut': 200,
            'content': 'Id of element clicked'+this.attr("id")
 });

有什么建议吗？

Answer 1

你可以这样做：

$("a.lightbox_image").each(function() {
  $(this).fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 600,
        'speedOut': 200,
        'content': 'Id of element clicked' + this.id
  });
});

this可能指的是您当前绑定的window（或document如果在ready事件中，如果没有看到更多代码则无法确定。要使this成为您想要的<a>，您应该使用.each()循环并在那里分配...在.each()闭包内，this是指到锚点。

Answer 2

我在使用Nick Craver的解决方案和“onClosed”功能时遇到了问题，经过一些测试后我找到了工作解决方案：

$("a.lightbox_image").each(function() {
  var tthis = this;
  $(this).fancybox({
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'speedIn': 600,
        'speedOut': 200,
        onClosed : function() {
           alert(this.id);
     }
  });
});

在我的情况下，在关闭编辑数据的fancybox窗口之后，这用于重新加载数据行。

Answer 3

这似乎对我有用：）

<div class="thumbnail">
    <a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_4">
        <img src="/dir/image4.png" alt="x" style="width:200px;height:160px;"  />
    </a>
    <a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_5">
        <img src="/dir/image5.png" alt="x" style="width:200px;height:160px;"  />
    </a>
    <a class="fancybox" title="MyTitle" rel="group" href="#" id="fiid_6">
        <img src="/dir/image6.png" alt="x" style="width:200px;height:160px;"  />
    </a>
</div>

javascript：

    $(document).ready(function() {

    $(".fancybox").attr('rel', 'gallery').fancybox({
            loop : false,
            afterLoad: function(current, previous) {
                console.log(this.element[0].id)
                console.info( 'Current: ' + current.href );        
                console.info( 'Previous: ' + (previous ? previous.href : '-') );

                if (previous) {
                    console.info( 'Navigating: ' + (current.index > previous.index ? 'right' : 'left') );


                    //When navigating, we want to add the next set of images! :)
                    new_images = getNextFancyImages(current.index > previous.index ? 'right' : 'left')
                }
            }
        });
});

在firebug中，您可以看到日志：）

Answer 4

建议使用每个循环的答案是正确的，但如果您使用任何回调（beforeShow，beforeLoad，onUpdate等），那么需要了解一个重要细节。

在每个循环的上下文中，此指的是将被点击的元素。但是只要你进入fancybox回调，这个就会引用fancybox对象。诀窍是将 this 元素存储到另一个变量中，例如。然后在回调中参考那个。

$('.fancybox').each(function() {
   var that = this;
   $(this).fancybox({
      beforeLoad: function() {
          var id = $(that).attr('id');
          console.log("id of element clicked is: "+id)
       }
    });
});

Answer 5

each(function()解决方案会破坏图库（换句话说，不再有“下一个”和“上一个”按钮）。

似乎可以工作并保存库的解决方案是在调用fancyBox之前为元素上的click事件分配一个函数，并将id保存到唯一的div。

例如：

$(document).ready(function() {
    $(".fancybox").click(function() { $("#<unique_div>").data("clickedid", this.id); }).fancybox({
        beforeShow: function () {
            this.title += '<br />';
            this.title += 'Clicked id: ' + $("#<unique_div>").data("clickedid");
        },
        prevEffect: 'none',
        nextEffect: 'none',
        loop: false,
        fitToView: false,
        helpers: { title: { type: 'inside' }  }
    });
});

Fancybox：获取点击的锚点/元素的ID

5 个答案: