Question

我有两个文本输入的表单。

<form>
    1<input type="text" id="test" name="test" />
    2<input type="text" id="test2" name="test" />
</form>
<div id="dimensions"></div>
<div id="texte"></div>

当用户在这些字段中键入值时，jQuery会自动计算比率并绘制一个矩形div，其宽度和高度以表格形式输入，但最多只能达到200x200像素。

我的问题是，当我输入时，例如width = 3和height = 100，我的div大于最大尺寸，我找不到我的错误。

$(document).ready(function () {
    $("#test, #test2").keyup(function () {
        var width = $("#test").val();
        var height = $("#test2").val();
        var max = 200;
        var min = 20;

    var ratio;
    if(width>=height){
      ratio = max / width;
      width = ratio * width;
      height = height * ratio;
    } else {
        ratio = max / height;
        height = ratio * height;
        width = width * ratio;
     };
         $("#dimensions").html(width + " x " + height);
        $("#texte").css({ "width":width + "px", "height":height + "px" });

    });
});

jsfiddle link

Answer 1

尝试将parseInt添加到宽度和高度输入中：

var width = parseInt($("#test").val());
var height = parseInt($("#test2").val());

修改

正如Adrian Trainor指出的那样，三元运算符在这种情况下会很有用，因为你不知道输入肯定是数字的。

var width = $("#test").val() ? parseInt($("#test").val() : 0; var height = $("#test2").val() ? parseInt($("#test2").val() : 0;

请参阅here

看起来它正在进行字符串比较，然后检查一个是否比另一个大。请参阅this question以了解正在发生的事情

Answer 2

确保正确处理输入。输入值为您提供字符串，而不是数字。你必须转换它们并进行适当的检查。

例如（您可以进行更多检查，具体取决于您认为用户可接受的内容）

http://jsfiddle.net/blackjim/ABWV6/5/

$(document).ready(function () {
    $("#test, #test2").keyup(function () {
        var width = parseInt($("#test").val(),10) || '';
        var height = parseInt($("#test2").val(),10) || '';

        if (!(typeof width === 'number' && typeof height === 'number')) {
            return false;
        }
        var max = 200;
        var min = 20;

        var ratio;
        if (width >= height) {
            ratio = max / width;
            width = ratio * width;
            height = height * ratio;
        } else {
            ratio = max / height;
            height = ratio * height;
            width = width * ratio;
        };

        $("#dimensions").html(width + " x " + height);
        $("#texte").css({
            "width": width + "px",
            "height": height + "px"
        });

    });
});

Answer 3

你需要parseint并确保你没有对空字符串进行计算。三元运算符对此非常有用：

var width = $("#test").val() ? parseInt($("#test").val()) : 0;
var height = $("#test2").val() ? parseInt($("#test2").val()) : 0;

这样，即使字段为空，也会使用0而不是空字符串进行计算。

Answer 4

我对您的示例进行了现代化，以便检查宽度/高度是否存在并且在20-200范围内。

参见jsfiddle.net/ABWV6/9 /

jquery从输入中动态创建带有错误的div

4 个答案: