自定义宽度编辑器？

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（但也许您只是提供了代码的简化版本）。

自定义宽度编辑器？

Custom width editor?

html

javascript

css

jquery

width