Question

我有一个关于在页面上多次使用函数的问题我试图根据屏幕分辨率设置块自动高度但是我在不同页面上有2个div需要应用此函数，它只应用于为前一个div：

第一个领带我将它应用于以下选择器

   <script>

       $(function () {
           resize_main_pane();
           $(window).resize(resize_main_pane);
       });
       function resize_main_pane() {
           var offset = $('.pagina-servicii').offset(),
           remaining_height = parseInt($(window).height() - offset.top - 105);
           $('.pagina-servicii').height(remaining_height);
       }
    </script>

第二次到以下地点：

   <script>

       $(function () {
           resize_main_pane();
           $(window).resize(resize_main_pane);
       });
       function resize_main_pane() {
           var offset = $('.another-selector').offset(),
           remaining_height = parseInt($(window).height() - offset.top - 283);
           $('.another-selector').height(remaining_height);
       }
    </script>

如何组合它们或单独使用？我想知道我是否需要使用一些没有冲突的设置？

Answer 1

循环所有选定的div并将高度应用于它们：

function resize_main_pane() {
    $.each($('#selector1, #selector2', function(){
        var offsetMinus = $(this).hasClass('bigOffset') ? 283 : 105;
        var offset = $(this).offset(),
        remaining_height = parseInt($(window).height() - offset.top - offsetMinus);
        $(this).height(remaining_height);
    });
}

Answer 2

将您的选择器放在一个数组中并使用each循环它们。 $(this)将是您的类选择器之一，并独立计算偏移量和高度。

$(function () {
   resize_main_pane();
   $(window).resize(resize_main_pane);
   // If you want to trigger this function on document load you could replace the above line with:
   $(window).resize(resize_main_pane).trigger('resize');
});
function resize_main_pane() {
    $('.pagina-servicii, .another-selector').each(function(index) {
        var offset = $(this).offset(),
        remaining_height = parseInt($(window).height() - offset.top - [105,283][index]);
        $(this).height(remaining_height);
    });
}

两个JQuery函数用于同一网站上的自动高度

2 个答案: