简化重复的jQuery代码

时间:2012-03-28 12:33:32

标签: jquery simplify

我已经设置了一个模态叠加层,并且这个代码可以简化,我只是不知道该怎么做。

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

});

有人可以帮忙吗?

2 个答案:

答案 0 :(得分: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 attribute starts with”选择器class^=。如果他们都有另一个共同的类,这对他们来说是独一无二的,我们可以通过$('.open-modal-overlay')更好地访问它们(如果他们的类属性是class="open-modal-overlay open-modal-overlay-2"等)。

如果没有,我们必须使用“class attribute contains”选择器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');

答案 1 :(得分:0)

怎么样:

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