Javascript 自定义宽度编辑器？

因此，我试图编写一个自定义jQuery宽度编辑器，它使用输入文本框，并根据通过输入文本框接收的输入更改特定HTML元素的宽度。这就是我目前所拥有的。（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会设置动画，但它会设置到几乎完全消失的位置。如果在输入文本框中键入任何内容，也会发生同样的情况

---

有人能给我解释一下为什么我的代码不能按我希望的方式正常工作吗

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

所以你应该这样做：

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

我还建议在

$（document.ready

回调中设置click listener，而不是调用

widthFunction

（但可能您只是给出了代码的简化版本）