自定义宽度编辑器？答案

【问题标题】：Custom width editor?自定义宽度编辑器？
【发布时间】：2015-07-06 01:18:37
【问题描述】：

所以，我尝试编写一个自定义 jQuery 宽度编辑器，该编辑器使用输入文本框，并根据通过输入文本框接收的输入更改特定 HTML 元素的宽度。 Here 是我目前所拥有的。 (JSFiddle)

HTML 和 CSS 是比较标准的，没什么花哨的。我认为那里没有任何错误。这是我不太了解的 JS + jQuery。特别是为什么它不起作用。这是我的 JS：

var widthValue = $('#widthInput').val();
var widthFunction = function() {
$('#widthChanger').click(function() {
    $('#changedWidth').animate({width: widthValue}, 5000);
});
};
widthFunction();

我使用 .val() 获取输入文本框的值并将其存储在 widthValue 中，创建了一个动画 div 的函数 - 当在按钮上单击时将其宽度更改为输入文本框的值5000 毫秒（5 秒）的过程，然后调用该函数。

当代码运行并单击按钮时，div 动画 - 但它动画到几乎完全消失的地方。如果您在输入文本框中输入任何内容，也会发生同样的事情。

谁能向我解释为什么我的代码不能按我想要的方式正常工作？

【问题讨论】：

标签： javascript jquery html css width

【解决方案1】：

您应该在单击按钮时获取输入的宽度，而不是之前。由于您在输入任何值之前获取宽度，因此您试图将 DIV 设置为空字符串宽度。

所以你应该这样做：

var widthFunction = function() {
    $('#widthChanger').click(function() {
        var widthValue = $('#widthInput').val();
        $('#changedWidth').animate({width: widthValue}, 5000);
    });
};
widthFunction();

我还建议在 $(document).ready 回调中设置点击侦听器，而不是调用 widthFunction（但也许您只是提供了代码的简化版本）。

【讨论】：