jQuery tự động thay đổi chiều cao phần tử

Tôi đang làm việc trên một dự án bố trí chất lỏng. Tôi có một số DIV chiều cao cố định trong tài liệu của tôi, và chiều cao là khác nhau cho tất cả chúng. Tôi cần phải thay đổi tương ứng chiều cao DIV này trên kích thước của trình duyệt. Đây là đánh dấu.jQuery tự động thay đổi chiều cao phần tử

<body> 
<div id="a" class="target"></div> 
<div id="b" class="target"></div> 
<div id="c" class="target"></div> 
</body>

Và css:

<style> 
    body { width: 90%; margin: 0 auto;} 
    .target { width:30%; float:left; margin:1.6%; cursor:pointer; } 
    #a { height: 200px; background-color: yellow;} 
    #b { height: 400px; background-color: green;} 
    #c { height: 600px; background-color: grey;} 
</style>

Âm thanh dễ dàng! Điều kiện chính là tôi không biết số tiền chuẩn của DIV mục tiêu và ID của chúng, đó là lý do tôi đang sử dụng .each (function()). Đây là kịch bản tôi đã viết:

$(document).ready(function(){ 
//set the initial body width 
var originalWidth = 1000; 
/*I need to go through all target divs because i don't know 
how many divs are here and what are their initial height*/ 
$(".target").each(function() 
{ 
    //get the initial height of every div 
    var originalHeight = $(this).height(); 
    //get the new body width 
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height 
    var newHeight = originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 
});

});

Tập lệnh này hoạt động hoàn hảo khi người dùng tải lại trang. Làm thế nào tôi có thể nhận được kết quả tương tự như vậy, khi người dùng thay đổi kích thước trình duyệt mà không cần tải lại? Tôi biết tôi nên áp dụng $ (cửa sổ) .resize event listener. Nhưng vấn đề là chiều cao ban đầu của DIV sẽ được tính toán bên trong sự kiện và kết quả sẽ được almoust như vòng lặp vô tận - đó là chiều cao cuối cùng sẽ tăng hoặc giảm trong tiến triển rất lớn. Tôi không cần điều đó! Làm cách nào để tôi có thể thực hiện mỗi lần tính DIV chiều cao ban đầu bên ngoài chức năng sự kiện và sau đó sử dụng các độ cao này trong hàm sự kiện? Hoặc có thể có một aproach khác để có được kết quả tương tự?

Nguồn

2012-06-16 theCoder

Bạn cần lưu trữ chiều cao ban đầu của mỗi div. Có nhiều cách khác nhau để làm điều đó, đây là một hack, lưu trữ nó trong nút DOM chính nó (có những cách tốt hơn, nhưng điều này là nhanh chóng và bẩn).

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    /*I need to go through all target divs because i don't know 
    how many divs are here and what are their initial height*/ 


    function resize() { 
    //This will only set this._originalHeight once 
    this._originalHeight = this._originalHeight || $(this).height(); 
    //get the new body width 
    var bodyWidth = $("body").width(); 
    //get the difference in width, needed for hight calculation 
    var widthDiff = bodyWidth - originalWidth; 
    //new hight based on initial div height 
    var newHeight = this._originalHeight + (widthDiff/10); 
    //sets the different height for every needed div 
    $(this).css("height", newHeight); 

    } 

    $(".target").each(resize); 
    $(document).resize(function(){ 
     $(".target").each(resize); 
    }); 
});

Nguồn

2012-06-16 17:45:39

Giải pháp nhanh chóng và dễ dàng thực sự. Hoạt động hoàn hảo. Cảm ơn! – theCoder

hãy nhìn vào những sự kiện thay đổi kích thước mà bạn có thể liên kết với jquery

http://api.jquery.com/resize/

Nguồn

2012-06-16 17:40:59 Nir

Tổng kết chức năng thay đổi kích cỡ của bạn và đăng ký thay đổi kích thước cửa sổ sự kiện.

$(document).ready(function(){ 
    //set the initial body width 
    var originalWidth = 1000; 
    resizeTargets(); 
    $(window).resize(resizeTargets); 

}); 

function resizeTargets() 
{ 
    $(".target").each(function() 
    { 
     //get the initial height of every div 
     var originalHeight = $(this).height(); 
     //get the new body width 
     var bodyWidth = $("body").width(); 
     //get the difference in width, needed for hight calculation 
     var widthDiff = bodyWidth - originalWidth; 
     //new hight based on initial div height 
     var newHeight = originalHeight + (widthDiff/10); 
     //sets the different height for every needed div 
     $(this).css("height", newHeight); 
    }); 
}

Nguồn

2012-06-16 17:41:00 Gabe

.data sử dụng để lưu trữ kích thước ban đầu của div bên trong chức năng .each $ bạn

$(this).data('height', $(this).height()); 
$(this).data('width', $(this).width());

bạn sau này có thể lấy lại kích thước cũ trong callback thay đổi kích thước

var old_height = $(this).data('height'); 
var old_width = $(this).data('width');

Hope điều này giúp

Nguồn

2012-06-16 17:46:16

Không thể làm cho nó hoạt động bằng cách sử dụng .data. Nhưng nó có thể là lỗi của tôi, tôi có quá ít kinh nghiệm về javascript. Dù sao cũng cảm ơn bạn. – theCoder

jQuery tự động thay đổi chiều cao phần tử

Trả lời

Các vấn đề liên quan