javascript - 自定义宽度编辑器？

Question

因此，我尝试编写一个使用输入文本框的自定义 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 会动画化 - 但它会动画化到几乎完全消失的地方。如果您在输入文本框中输入任何内容，也会发生同样的事情。

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

Answer 1

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

所以你应该这样做:

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

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