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

目前我正在使用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

。或者，如何使用类实现这一点（每个元素仍然需要特定的链接）

---

这可能吗？

这里最简单的解决方案是

$('[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
    });
});

---

这里最简单的解决方案是

$('[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
    });
});

---

这是我在发布几分钟后想到的（

mask

是一个所有元素共享的类）：

---

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

documentLink

这是我在发布几分钟后想到的（

mask

是一个所有元素都共享的类）：

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

documentLink

这将指导您：

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

并应用于所有图像或您希望的任何选择器：

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

这将指导你们：

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

并应用于所有图像或您希望的任何选择器：

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

---

这将工作，即使图像不能在最关心的OP，即使这是非常不可能的。无论如何，非常优雅的解决方案，值得+1！问一个问题：

slice

和应用于字符串的

substring

之间有什么区别吗？@LightStyle我以为OP有两个以上的图像。关于切片和子字符串之间的区别，我更容易键入：）是的，我知道他可能会有两个以上的图像，但这可能会带来意想不到的结果（但正如我之前所说的，这不太可能）。关于两者之间的区别。。。LOLHow（诚实的问题，因为我对JS很幼稚）与我使用的基于类的方法（见下文）相比如何？@einar如果你可以定义一个类并将其添加到你的图像中，那么它比使用强大的“开始”选择器更快（可能更干净）。这甚至适用于那些不在操作中的图像，即使可能性很小。无论如何，非常优雅的解决方案，值得+1！问一个问题：

slice

和应用于字符串的

substring

之间有什么区别吗？@LightStyle我以为OP有两个以上的图像。关于切片和子字符串之间的区别，我更容易键入：）是的，我知道他可能会有两个以上的图像，但这可能会带来意想不到的结果（但正如我之前所说的，这不太可能）。关于两者之间的区别。。。LOLHow（诚实的问题，因为我对JS很幼稚）与我使用的基于类的方法（见下文）相比如何？@einar如果你能定义一个类并将其添加到你的图像中，那么它比使用强大的“从开始”选择器更快（可能更干净）。