Question

我想将第一个元素（foo）的宽度绑定到第二个元素（bar）的宽度。当元素“bar”的宽度发生变化时，我希望元素“foo”自动更改宽度。

我知道我可以将元素“foo”的宽度设置为元素“bar”的宽度，我们可以在下面的代码中看到，但这是一次性的事情。如果在执行此代码后元素“bar”的宽度在页面处理中的某处发生变化，会发生什么？例如“bar”是一个select元素，它的宽度因AJAX调用而改变 - 元素“foo”如何改变它的宽度？

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

由于

Answer 1

Resize事件只绑定到窗口而不是像div这样的元素，这里有充分的讨论：jQuery resize not working at FireFox, Chrome and Safari

唯一的解决方案是拥有一个全局变量，并在更改条形大小时使用它来更新。 foo的宽度设置为全局变量。在更新条形大小的方法或代码块中添加代码，使用$（foo）.width（$ bar.width（））直接更新全局变量或foo大小;

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

编辑：下面这个jQuery方法不起作用，更新了这一行的答案。

为resize

添加jquery处理程序

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

Answer 2

正如其他人所说，当元素的维度发生变化时，没有任何事件会发生 - 可能是因为有太多方法可能发生这种情况。您需要选择要检查的点，并在必要时进行更新。

这是发布/订阅模型的一个很好的例子：基本上，你的'#bar'元素会发布一个事件，说“我已经改变了大小”，你的#foo元素会订阅该事件。这使得发布任意数量的元素变得容易和可扩展，并且任何数字都可以订阅，而不必彼此“了解”。

使用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');
});

当然，您可以根据需要触发resizeCheck事件 - 在ajax请求的回调中，在定时循环上，当窗口调整大小时。如果您没有使用特定元素进行调用，请使用$(document).trigger('layout.resizeCheck')。

Answer 3

将代码放在函数中，并在进行可能更改维度的AJAX调用时调用它。如果您的AJAX调用是零星的，并且由于某种原因您无法控制它们，您可以使用setInterval来连续检查更改。

您的另一个选择是使用评论中提到的jQuery plugin。

Answer 4

试试这个：

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

如果在#bar选择框中选择值时触发了AJAX调用，则此代码段应该有效。您也可以尝试使用.bind('keyup change', function(){...});代替.change(function{...});

HTML，jQuery：将一个元素的宽度绑定到另一个元素

4 个答案: