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

我想将第一个元素foo的宽度绑定到第二个元素条的宽度。我希望元素foo的宽度在元素栏的宽度改变时自动改变

我知道我可以将元素foo的宽度设置为元素栏的宽度，正如我们在下面的代码中看到的，但这是一次性的。执行此代码后，如果页面处理过程中元素栏的宽度发生变化，会发生什么情况？e、 bar是一个select元素，它的宽度会随着AJAX调用而改变——元素foo如何改变它的宽度

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

---

感谢

调整大小事件仅绑定到窗口，而不绑定到div等元素， 在此进行全面讨论：

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

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

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

为添加jquery处理程序

---

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

---

您的另一个选择是使用注释中提到的事件。

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

这是发布/订阅模型的一个很好的例子：基本上，您的“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请求的回调中，当窗口调整大小时，在定时循环中触发resizeCheck事件。如果不是从特定元素调用，请使用$document.trigger'layout.resizeCheck'。

尝试以下操作：

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

---

如果您的AJAX调用是在从条形选择框中选择值时触发的，那么这个代码段应该可以工作。您也可以尝试使用.bind'keyupchange'，函数{…}；而不是.changefunction{…}

什么事件可以更改条的元素宽度？如果是窗口调整大小-将其绑定到$window.resizefunction…您的函数…}；如果是其他事件，请将其绑定到该事件。另请参见：了解有关上述HTML.updated答案的结构将很有帮助。调整大小事件不适用于div，仅适用于窗口

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