1

これら 2 つをマージして機能を強化し、編集を容易にする方法を教えてください。

上の 1 つは Screen Re-size で関数を起動するためのもので、もう 1 つはロード時に画面サイズを検出するためのものです。

関数全体: 

(function(){
  //detect the width on page load//
  $(document).ready(function(){
    var width = $(window).width();
    if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox'));
    }
  });
  //update the width value when the browser is resized//
  $(window).resize(function(){
    var width = $(window).width();
    if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox')); 
    }
  });
})(jQuery);

トップセクション:

    (function(){
    //detect the width on page load//
     $(document).ready(function(){
    var width = $(window).width();
    if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox'));
    }
  });

底部: 

  //update the width value when the browser is resized//
  $(window).resize(function(){
    var width = $(window).width();
    if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox')); 
    }
  });
})(jQuery);
4

4 に答える 4

2

必要なものはこれだけです: LIVE DEMO

$(function(){  // DOM READY

    function myFunction(){   
      var insert = $(window).width()<=770 ? 'insertBefore' : 'insertAfter';
      $('#home-sectionB img')[insert]( $('#home-sectionB span') );
      $('.detailsBox')[insert]( $('.imagesGrid') );
    }
    myFunction();                   // For DOM ready
    $(window).resize( myFunction ); // For Resize

});

これは次の翻訳です。

$(function(){  // DOM READY


    function myFunction(){

        var width = $(window).width();
        if(width <= 770){       
            $('#home-sectionB img').insertBefore($('#home-sectionB span'));
            $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
            $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
            $('.imagesGrid').insertBefore($('.detailsBox'));
        }

    }

    myFunction();                   // For DOM ready
    $(window).resize( myFunction ); // For Resize


});

補足:要素が原因で挿入が完全に混乱するのを防ぐためにclass、セレクターの割り当てをより具体的にしてください。

于 2013-09-05T07:00:06.950 に答える
2

それらがまったく同じである場合は、別の関数を作成して、これらのイベントで呼び出します。

$(function(){
  //detect the width on page load//
  $(document).ready(handleResize);  // Notice you're already in the ready event
                                    // on this line so you can just call it here

  //update the width value when the browser is resized//
  $(window).resize(handleResize);
});

function handleResize(){
    var width = $(window).width();
    if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox'));
    }
}
于 2013-09-05T06:59:46.337 に答える
1

名前付き関数の使用を避けることができます (Roko コードに基づく):

jQuery(function ($) {
    $(window).resize(function () {   
        var insert = $(window).width() <= 770 ? 'insertBefore' : 'insertAfter';
        $('#home-sectionB img')[insert]($('#home-sectionB span'));
        $('.detailsBox')[insert]($('.imagesGrid'));
    }).resize(); // fires resize event in order to apply initial values
});
于 2013-09-05T07:29:37.500 に答える
0

共通関数を作成するのは簡単です

function foo() {
  var width = $(window).width();
  if(width <= 770){

        $('#home-sectionB img').insertBefore($('#home-sectionB span'));
        $('.detailsBox').insertBefore($('.imagesGrid'));
        } else {
        $('#home-sectionB span').insertBefore($('#home-sectionB img')); 
        $('.imagesGrid').insertBefore($('.detailsBox')); 
    }
}

そして、それをドキュメントの準備ができて呼び出し、サイズを変更します

$(function() {
  foo();
});

$(window).resize(function(){
  foo();
});
于 2013-09-05T07:01:48.453 に答える