jQuery 加载屏幕大小和屏幕调整大小

Question

我有一些 jquery 如果 window 以小于 630px 的大小加载或屏幕调整为小于 620px 时触发一些事件。

我目前有 2 个单独的 if/else 语句 - 一个用于加载，一个用于 window 调整大小 - 无论如何我可以合并它们所以我没有重复每个函数一个？

这是我的代码 - 我尝试了一下，但无法正常工作

$(function () {
 var $window = $(window);
 $(window).on('resize', function () {
    if ($window.width() < 620) {
       $("#prd_details_smaller").append( $(".product_title"), $(".product_code"), $(".prd_reviews") );
       $("#short_desc").hide();
   }else{
       $(".col_prd_rgt").prepend( $(".product_title"), $(".product_code"), $(".prd_reviews") );
       $("#short_desc").show();    
    };
 });    
    if ($(window).width() < 620) {
       $("#prd_details_smaller").append( $(".product_title"), $(".product_code"), $(".prd_reviews") );
       $("#short_desc").hide();    
    } else {
       $(".col_prd_rgt").prepend( $(".product_title"), $(".product_code"), $(".prd_reviews") );
       $("#short_desc").show();        
    }
});

Answer 1

您为什么不只创建一个名为 window_resize() 的函数，然后在 onload 上以及在其他地方需要时调用该函数。

Answer 2

您可以通过将要重复使用的代码放在它自己的函数中并在相关点调用它来实现此目的：

function resizeLogic() {
    if ($(window).width() < 620) {
        $("#prd_details_smaller").append('.product_title, .product_code, .prd_reviews');
        $("#short_desc").hide();
    } else {
        $(".col_prd_rgt").prepend('.product_title, .product_cod, .prd_reviews');
        $("#short_desc").show();
    };
}
resizeLogic(); // on load
$(window).resize(resizeLogic); // on window resize

就个人而言，我会为此使用 CSS 媒体查询。使用 absolute 定位仍然可以轻松地将元素移动到页面上的任何位置。

Answer 3

在合并一些通用代码使其更干燥方面，如何

  $(function () {
    var $window = $(window);
    var $appendItems = $(".product_title"), $(".product_code"), $(".prd_reviews");

    function appendItems () {
        $("#prd_details_smaller").append($appendItems);
        $("#short_desc").hide(); 
    }

    function prependItems () {
        $(".col_prd_rgt").prepend($appendItems);
        $("#short_desc").show();    
    }

    function checkSize (){
        var fn = ($window.width() < 620) ? appendItems : prependItems;
        fn();
    }

    $(window).on('resize', function () {     
        checkSize();
    });  

    checkSize();
});

jQuery 加载屏幕大小和屏幕调整大小

jQuery onload screen size and screen resize

jquery

if-statement

resize

function

onload