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

Answer 2

两件事！你应该在点击时获取#widthInput的值 - 你的代码当执行widthFunction时（即加载时）当前抓取值，而输入为空。其次，你没有通过一个有你价值的单位。这有效：

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

自定宽度编辑器？

2 个答案: