Question

我正在使用j-query来设置div的高度和width一样。它现在正在运行，但是我想让它在窗口调整大小上运行。

我用这个：

<script>
$(document).ready(function(){
$('.source').each(function(){
    var currentWidth = $(this).width();
    $(this).height(currentWidth);
})
})

Answer 1

您可以这样使用：

$(window).on('resize',function(){
$('.source').each(function(){
    var currentWidth = $(this).width();
    $(this).height(currentWidth);
})
}).resize();//runs at first load

Answer 2

$(document).resize(function(){
    //do things here
});

Answer 3

$(window).on('resize', function(){
    $('.source').each(function(){
        var currentWidth = $(this).width();
        $(this).height(currentWidth);
    });
});

$(document).ready(function(){
    $('.source').each(function(){
        var currentWidth = $(this).width();
        $(this).height(currentWidth);
    });
});

甚至更好，将重复的代码放入一个单独的函数中：

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

$(document).ready(function(){
    changeWidth();
});

function changeWidth() {
    $('.source').each(function(){
        var currentWidth = $(this).width();
        $(this).height(currentWidth);
    });
}

Answer 4

在jquery中使用 window.resize() 事件

function test() {
    $('.source').each(function () {
        var currentWidth = $(this).width();
        $(this).height(currentWidth);
    });
}

$(document).ready(function () {
    test();
    $(window).resize(test);
});

Answer 5

这只是@Bala的修改代码

// ready event
$(function () {
    function test() {
        $('.source').each(function () {
            var self = $(this);
            self.height(self.width());
            // but how the width is changing?
        });
    }();  //calling the function

    // resize event
    $(window).resize(test);
});

BTW，宽度如何变化？

在窗口大小调整上运行Jquery

5 个答案: