Question

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

顶部的一个是在屏幕重新调整大小时触发功能，另一个是在负载时检测屏幕尺寸。

整个功能：

(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);

Answer 1

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

$(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'));
    }
}

Answer 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元素导致的插入混乱，在分配选择器时更具体！}

Answer 3

您可以避免使用命名函数（基于Roku代码）：

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
});

Answer 4

创建一个通用功能很简单

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();
});

如何增强这个小功能

4 个答案: