Question

嘿伙计..快问：

我写了一个简单的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的原因。如果您需要样本来查看我所指的内容，我目前正在使用我的新网站测试版中的脚本：http://ctrlshiftcreate.com/photography.php?photo=6&r_folder=

点击“查看完整尺寸”以查看我的意思。我非常感谢任何帮助 - 非常感谢！

Answer 1

我认为正在发生的事情是lightbox()调用只将锚点设置为灯箱，它实际上并不显示灯箱。因此，第一次点击是指灯箱“将此设为灯箱链接”，第二次点击被灯箱捕捉并实际显示灯箱。

编辑它的实时方面是否重要？或者，您是否计划在加载文档后添加更多需要捕获的链接？如果实时不重要，标准lightBox()方法应足以捕获点击次数。如果是，我会考虑编写一个hookAnchors()样式方法，您可以在ajaxing之后再调用lightBox()。类似的东西：

$(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的结果）。

Javascript双击元素

1 个答案: