0

現在、レスポンシブ Web サイトに取り組んでいます。ウィンドウのサイズがモバイルに変更されたら、いくつかの div を見つけて並べ替える必要があります。今、私はこのようにしています：

$(window).resize(function() {
  var width = $(window).width();
  if( width < 768) {
    $('#id-1 .image-box').insertBefore($('#id-1 .text-box'));
    $('#id-2 .image-box').insertBefore($('#id-1 .text-box'));
    $('#id-3 .image-box').insertBefore($('#id-1 .text-box'));
  } else if( width > 767) {
    $('#id-1 .text-box').insertBefore($('#id-1 .image-box'));
    $('#id-2 .text-box').insertBefore($('#id-2 .image-box'));
    $('#id-3 .text-box').insertBefore($('#id-3 .image-box'));
  }
} );
$(window).resize();

これを行うより効率的な方法はありますか？div を検索する必要があります。この場合は「.image-box」で、前の div のクラスを確認し、「.text-box」の場合は 2 つを交換します。

助けてくれてありがとう！

4

1 に答える 1

0

HTML は保留中ですが、もう少しスケーラブルなアプローチを次に示します。

var elements = [
   $('#id-1'),
   $('#id-2'),
   $('#id-3')
];
var swap = function(firstSelector, secondSelector) {
    for ( var i = 0, l = elements.length; i < l; ++i ) {
        elements[i].find(firstSelector)
            .insertBefore(elements[i].find(secondSelector);
    }
};
$(window).resize(function() {
  var width = $(window).width();
  if( width < 768) {
    swap('.image-box', '.text-box');
  } else if( width > 767) {
    swap('.text-box', '.image-box');
  }
});
$(window).resize();
于 2013-07-03T14:55:43.890 に答える