为多个addClass创建用于enquire.js的函数

Question

我在当前的项目中使用enquire.js。我使用它将css类添加到大屏幕的几个元素中，并在较小的屏幕上删除这些类：

enquire.register("screen and (min-width: 48.0625em)", {
    match : function() {
        // absolute position for "bubble" lists
        $('.bubbles').addClass('structure');
        $('.structure li:nth-child(1)').addClass('s1');
        $('.structure li:nth-child(2)').addClass('s2');
        $('.structure li:nth-child(3)').addClass('s3');
        $('.structure li:nth-child(4)').addClass('s4');
        $('.structure li:nth-child(5)').addClass('s5');
        $('.structure li:nth-child(6)').addClass('s6');
        $('.structure li:nth-child(7)').addClass('s7');
        $('.structure li:nth-child(8)').addClass('s8');
        $('.structure li:nth-child(9)').addClass('s9');
    },

     unmatch : function () {
        $('.bubbles').removeClass('structure');
        $('.structure li:nth-child(1)').removeClass('s1');
        $('.structure li:nth-child(2)').removeClass('s2');
        $('.structure li:nth-child(3)').removeClass('s3');
        $('.structure li:nth-child(4)').removeClass('s4');
        $('.structure li:nth-child(5)').removeClass('s5');
        $('.structure li:nth-child(6)').removeClass('s6');
        $('.structure li:nth-child(7)').removeClass('s7');
        $('.structure li:nth-child(8)').removeClass('s8');
        $('.structure li:nth-child(9)').removeClass('s9');
    }
});

一定有速记的。我想我可以创建一个函数，类似于：

$(.'bubbles').each(function() {
   // add all the classes here
}

这在查询的unmatch函数中是可逆转的。这可能.？

Answer 1

您可以使用each回调的索引属性来切换类：

enquire.register("screen and (min-width: 48.0625em)", {
    match: function () {
        // absolute position for "bubble" lists
        $('.bubbles').addClass('structure');
        $('.structure li').each(function (index) {
            $(this).toggleClass('s' + (index + 1));
        });
    },

    unmatch: function () {
        $('.structure li').each(function (index) {
            $(this).toggleClass('s' + (index + 1));
        });
        $('.bubbles').removeClass('structure');
    }
});