2

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

理论上会有超过 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;
});

});

任何人都可以帮忙吗？

4

2 回答 2

3

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

我们可以假设所有人都 open-modal-overlay-*应该有这个点击监听器吗？我们可以假设这是他们唯一的课程吗？在这种情况下，我们可以这样做：

$('*[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');
于 2012-03-28T12:38:05.707 回答
0

怎么样：

$([1, 2, 3, 4, 5, 6]).each(function (i, e) {
    $('.open-modal-overlay-' + e).click(function () {
        $('#modal-overlay-' + e).modal();
        return false;
    })
});
于 2012-03-28T12:40:28.240 回答