1

我们如何将这两者合并在一起以增强功能并使其更易于编辑。

最上面的一项是在 Screen Re-size 上触发功能，另一项是在加载时检测屏幕尺寸。

整体功能： 

(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

如果它们完全相同，只需创建一个单独的函数并在这些事件上调用它。

$(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 回答
2

这就是您所需要的：现场演示

$(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 回答
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 回答