大家好。.快速提问:

我写了一个简单的JS,当单击图像链接时,它会打开lightBox进行图像查看。基本上,使用jQuery(是的,我很懒),我检测到锚标记的单击,使用正则表达式确保HREF属性是图像文件,如果是,它将在lightBox中打开图像。一切正常,除了一件事:锚点需要两次单击才能打开lightBox。这是为什么?

这是我写的脚本:

    $(document).ready(function(){
    var href;
    var imageExtensions = /(.)+(.jpg)|(.png)|(.gif)|(.bmp)/;
    //On click of any link
    $("a").live("click",function(event){
        href = $(this).attr("href");
        //If the target URL is an image, use lightbox to open it
            if(imageExtensions.test(href)){
                event.preventDefault();
                $(this).attr("class","lightboxIMG");
                //Prevent the link from opening, and open lightbox
                $(".lightboxIMG").lightBox();
                $(this).attr("class","");
            }
    });
//END
});


我看不到是什么导致用户不得不单击两次才能激活lightBox。如果您需要一个示例来了解我的指称,那么我目前正在新网站的Beta版中使用该脚本:http://ctrlshiftcreate.com/photography.php?photo=6&r_folder=

点击“查看完整大小”,以了解我的意思。非常感谢您的帮助-非常感谢!

最佳答案

我认为发生的事情是lightbox()调用仅将锚点设置为灯箱,而实际上并未显示灯箱。因此,第一次点击是对灯箱说“使它成为灯箱链接”,第二次点击被灯箱捕获并实际显示了灯箱。

编辑它的实时方面重要吗?或者,您打算添加更多在文档加载后需要捕获的链接吗?如果现场直播并不重要,则标准lightBox()方法应足以捕获点击。如果是这样,我会考虑编写一个hookAnchors()样式的方法,您可以在再次简单地调用lightBox()的ajaxing之后调用它。就像是:

$(document).ready(function() {
    hookAchors();
});

function hookAnchors() {
    var imageExtensions = /(.)+(.jpg)|(.png)|(.gif)|(.bmp)/;
    $('a')
        .filter(function() {
            return imageExtensions.test($(this).attr("href"))
        })
        .lightBox();
}


这样,您可以在DOM更改代码内调用hookAnchors(例如,作为$.get的结果)。

07-24 09:50
查看更多