jQuery onload 屏幕大小和屏幕调整大小

Question

如果窗口加载尺寸小于 630px 或屏幕大小调整为小于 620px，我有一些 jquery 会触发一些事件。

我目前将其作为 2 个独立的 if/else 语句 - 一个用于加载，一个用于窗口调整大小 - 无论如何我可以合并这些语句，这样我就不会为每个语句提供重复的功能？

这是我的代码 - 我已经尝试过，但无法让它工作

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

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

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 媒体查询。使用绝对定位仍然可以轻松地将元素移动到页面上的任何位置。