Question

如果窗口加载的大小小于630px或者屏幕调整为小于620px，我会得到一些触发某些事件的jquery。

我目前将它作为2个separare if / else语句 - 一个用于onload，一个用于窗口调整大小 - 无论如何我可以合并这些，所以我不会复制每个函数吗？

这是我的代码 - 我已经去了，但无法让它工作

$(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媒体查询。使用absolute定位可以轻松地在页面上的任何位置移动元素。

Answer 2

为什么不创建一个名为window_resize（）的函数，然后在onload上调用该函数，并在其他地方需要时调用该函数。

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 onload屏幕大小和屏幕调整大小

3 个答案: