HTML, jQuery: Ràng buộc chiều rộng của một phần tử thành một phần tử khác

Question

Tôi muốn gắn kết chiều rộng của phần tử đầu tiên (foo) với chiều rộng của phần tử thứ hai (thanh). Tôi muốn phần tử "foo" tự động thay đổi chiều rộng khi độ rộng của phần tử "bar" được thay đổi.

Tôi biết tôi có thể đặt chiều rộng của phần tử "foo" thành chiều rộng của phần tử "thanh" như chúng ta có thể thấy trong mã bên dưới, nhưng đây là điều một lần. Điều gì sẽ xảy ra nếu chiều rộng của phần tử "bar" thay đổi ở đâu đó trong quá trình xử lý trang sau khi mã này được thực thi? ví dụ. "bar" là một phần tử được chọn và độ rộng của nó thay đổi do kết quả của cuộc gọi AJAX - phần tử "foo" sẽ thay đổi chiều rộng của nó như thế nào?

$('#foo').width($('#bar').width()); 

Cảm ơn

Answer 1

Resize sự kiện đang bị ràng buộc chỉ vào cửa sổ và không để các yếu tố như divs, thảo luận đầy đủ ở đây: jQuery resize not working at FireFox, Chrome and Safari

Giải pháp duy nhất là nên có một biến toàn cầu và sử dụng nó để cập nhật khi kích thước thanh được thay đổi. chiều rộng của foo được đặt thành biến toàn cầu. Thêm mã trong phương thức hoặc khối mã cập nhật kích thước thanh, để cập nhật biến toàn cầu hoặc kích thước foo trực tiếp bằng cách sử dụng $ (foo) .width ($ bar.width());

function setBarHeight(value) { 
    $('#bar').attr('width') = Number(value); 
    $('#foo').attr('width') = $('#bar').attr('width'); 
} 

EDIT: Cách tiếp cận jQuery bên dưới không hoạt động, được cập nhật câu trả lời phía trên dòng này.

Add handler jquery cho resize

$(document).ready(function() { 
    $('#bar').resize(function() { 
     $('#foo').width($('#bar').width()); 
    }); 
}); 

Answer 2

Nơi mã của bạn trong một hàm và gọi nó là bất cứ khi nào bạn thực hiện cuộc gọi AJAX rằng có khả năng thay đổi kích thước. Nếu các cuộc gọi AJAX của bạn là lẻ tẻ và vì một số lý do bạn không có quyền kiểm soát chúng, bạn có thể sử dụng setInterval để kiểm tra các thay đổi liên tục.

Tùy chọn khác của bạn là sử dụng jQuery plugin như được đề cập trong các nhận xét.

Answer 3

Như những người khác đã nói, không có sự kiện nào xảy ra khi kích thước của một nguyên tố thay đổi - có lẽ vì có quá nhiều cách có thể xảy ra. Bạn sẽ cần phải chọn các điểm mà bạn muốn kiểm tra, và cập nhật nếu cần thiết.

Đây là trường hợp tốt cho mô hình xuất bản/đăng ký: Về cơ bản, phần tử '#bar' của bạn sẽ xuất bản sự kiện, nói "Tôi đã thay đổi kích thước" và yếu tố #foo của bạn sẽ đăng ký sự kiện đó. Điều này làm cho nó dễ dàng và có thể mở rộng để có bất kỳ số lượng các yếu tố xuất bản, và bất kỳ số lượng đăng ký, mà không cần họ phải 'biết về' nhau.

Với jQuery:

$(function(){ 
    // The document object acts as the 'subscription service' - 
    // it receives all events via bubbling. 
    document.bind('layout.resizeCheck', function(){ 
     $('#bar').width(whatever); 
    }); 

    // Whenever you need to update the size: 
    $('#foo').trigger('layout.resizeCheck'); 
}); 

Tất nhiên, bạn có thể kích hoạt các sự kiện resizeCheck tuy nhiên bạn thích - trong một gọi lại từ một yêu cầu ajax, trên một vòng lặp theo thời gian, khi cửa sổ thay đổi kích thước. Nếu bạn không gọi từ một yếu tố cụ thể, chỉ cần sử dụng $(document).trigger('layout.resizeCheck').

Answer 4

Hãy thử điều này:

$('#bar').change(function() { 
    $('#foo').width($('#bar').width()); 
}); 

đoạn này nên làm việc nếu gọi AJAX của bạn được kích hoạt trên việc lựa chọn các giá trị từ #bar chọn hộp.Bạn cũng có thể thử sử dụng .bind('keyup change', function(){...}); thay vì .change(function{...});