0

現在のプロジェクトで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
}

これは、enquire のunmatch関数で元に戻すことができます。これは可能ですか...？

4

1 に答える 1

0

コールバックの index プロパティを使用して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');
    }
});
于 2013-08-21T14:47:09.790 に答える