简化重复的 jQuery 代码答案

【问题标题】：Simplify repeating jQuery code简化重复的 jQuery 代码
【发布时间】：2012-03-28 12:33:31
【问题描述】：

我已经设置了一个模态覆盖并且有这个可以简化的代码，我只是不知道该怎么做。

理论上会有超过 6 个代码块，所以理想情况下应该处理尽可能多的代码块。 ID（1 到 6）是使用 PHP 动态生成的。

jQuery(function ($) {
// Load dialog on click
$('.open-modal-overlay-1').click(function (e) {
    $('#modal-overlay-1').modal();

    return false;
});

$('.open-modal-overlay-2').click(function (e) {
    $('#modal-overlay-2').modal();

    return false;
});

$('.open-modal-overlay-3').click(function (e) {
    $('#modal-overlay-3').modal();

    return false;
});

$('.open-modal-overlay-4').click(function (e) {
    $('#modal-overlay-4').modal();

    return false;
});

$('.open-modal-overlay-5').click(function (e) {
    $('#modal-overlay-5').modal();

    return false;
});

$('.open-modal-overlay-6').click(function (e) {
    $('#modal-overlay-6').modal();

    return false;
});

});

谁能帮忙？

【问题讨论】：

元素除了open-modal-overlay-X类之外还有其他类吗？
您可以检查 jQuery 正则表达式选择器功能以匹配类

标签： jquery simplify

【解决方案1】：

最佳实施取决于我们可以对您的其余标记假设哪些因素。

我们可以假设 all open-modal-overlay-* 应该有这个点击监听器吗？我们可以假设这是他们拥有的 only 类吗？在这种情况下，我们可以这样做：

$('*[class^=open-modal-overlay-]').click(function() {
    var id = $(this).attr('class').slice(-1); // last char of "class" attribute
    $('#modal-overlay-'+id).modal();
});

如果我们不能假设这是他们唯一的类，那么我们就不能像那样使用.attr('class')，也不能使用“类属性以”选择器class^=。如果他们都有另一个共同的类，这是他们独有的，我们或许可以通过$('.open-modal-overlay') 更好地访问它们（例如，他们的类属性是class="open-modal-overlay open-modal-overlay-2" 等）。

如果没有，我们必须使用“类属性包含”选择器class*=，或者简单地指定选择器：

$('.open-modal-overlay-1, .open-modal-overlay-2, .open-modal-overlay-3, .open-modal-overlay-4, .open-modal-overlay-5, .open-modal-overlay-6').click(function() {
   ...
});

而且我们不能像这样推导出 id 变量，所以我们必须这样做：

var id = $(this).attr('class').replace(/^.*open-modal-overlay-(\d+).*$/, '$1');

【讨论】：

【解决方案2】：

怎么样：

$([1, 2, 3, 4, 5, 6]).each(function (i, e) {
    $('.open-modal-overlay-' + e).click(function () {
        $('#modal-overlay-' + e).modal();
        return false;
    })
});

【讨论】：