0

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

<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链接

4

4 回答 4

0

尝试添加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;

看这里

看起来它正在进行字符串比较，然后检查一个是否比另一个大。请参阅此问题以了解发生了什么

于 2013-07-01T17:10:58.490 回答
0

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

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

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"
        });

    });
});
于 2013-07-01T17:20:52.107 回答
0

您需要解析并确保您没有对空字符串进行计算。三元运算符对此很有用：

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

这样，即使字段为空，也将使用 0 而不是空字符串来完成计算。

于 2013-07-01T17:30:39.303 回答
0

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

见 jsfiddle.net/ABWV6/9/

于 2013-07-01T17:37:39.733 回答