javascript - jQuery：使用单个函数而不是重复函数进行类似操作

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