Question

目前我正在使用fancybox来显示这样的iframe：

$('#img-001').click(function() {
    $.fancybox({
        type: 'iframe',
        href: 'doc-001.html',
       showCloseButton: true
    });
});


$('#img-002').click(function() {
    $.fancybox({
        type: 'iframe',
        href: 'doc-002.html',
        showCloseButton: true
    });
});

然而，这样做很繁琐，需要一遍又一遍地复制相同的代码。有没有可以使用单一功能的替代方案？这样的操作将采用#img-ID的任何内容并将href更改为doc-ID.html。或者，或者，如何使用类来执行此操作（每个元素仍需要特定的链接）？

这可能吗？

Answer 1

这里最简单的解决方案是

$('[id^="img-"]').click(function() { // select all elements whose id starts with "img-"
    $.fancybox({
        type: 'iframe',
        href: 'doc'+this.id.slice(3)+'.html', // takes the "-007" part of "img-007"
        showCloseButton: true
    });
});

Answer 2

$('#img-001, #img-002').click(function() {
    var code = this.id.replace('img', '');
    $.fancybox({
        type: 'iframe',
        href: 'doc' + code + '.html',
        showCloseButton: true
    });
});

Answer 3

$('#img-001,#img-002').click(function() {
    $.fancybox({
        type: 'iframe',
        href: 'doc-'+this.id.split['-'][1]+'.html',
       showCloseButton: true
    });
});

Answer 4

这是我在发布后几分钟提出的（mask是一个所有元素共享的类）：

$('div.mask').click(function() {

    var id = $(this).attr('id');
    var documentLink = "work-" + id.split("-")[1] + ".html";

    $.fancybox({
        type: 'iframe',
        href: documentLink,
        showCloseButton: true
    })
}
);

但是我想知道是否有更好的方法来处理documentLink。

Answer 5

这将指导你：

function magic(){
    m = $(this).attr("id").match(/.*-(.*)/)
    $.fancybox({
       type: 'iframe',
       href: 'doc-'+m[1]+'.html',
       showCloseButton: true
     });
}

并适用于您想要的所有图像或任何选择器：

$("body").find("img").each(magic);

jQuery：对类似的操作使用单个函数而不是重复函数

5 个答案: