0

我使用 jQuery UI 创建了一个可调整大小的框，然后将值传递给文本框。这些值可以是 CM 或英寸。

我遇到的问题是当您从 unit_type 框中选择厘米后拖动大小时，它会恢复为英寸。我想我只需要重新思考它的逻辑并重新映射它。

任何人都可以帮助这个..？

代码是...

$(function()
{
    $("#resizable").resizable({
        aspectRatio: 16 / 9,
        maxWidth:  $("#max_width").val(),
        maxHeight: $("#max_height").val(),
        resize: function() {

            var widthInch = $("#resizable").width() / 200;
            var heightInch = $("#resizable").height() / 200;

            $("#unit_type").change(function()
            {
                var widthCM = $("#resizable").width() / 200 * 2.54;
                var heightCM = $("#resizable").height() / 200 * 2.54;

                $(".width").val(widthCM + '' + ' CM');
                $(".height").val(heightCM + '' + ' CM');
            })

            var widthCM = $("#resziable").width() / 200 * 2.54;
            var heightCM = $("#resizable").height() / 200 * 2.54;

            $(".width").val(widthInch + '' + ' Inches');
            $(".height").val(heightInch + '' + ' Inches');
        }
    });
})

谢谢

4

1 回答 1

1

问题在于您在哪里计算大小。最好的解决方案是将其拉出到一个新函数中，然后在调整框大小或更改单位时调用该函数。像这样的东西应该工作。（当我做了一些假设时，您可能会修改它以适合您的确切标记。）

$(function()
{
    $("#resizable").resizable({
        aspectRatio: 16 / 9,
        maxWidth:  $("#max_width").val(),
        maxHeight: $("#max_height").val(),
        resize: updateSize
    });
})

$("#unit_type").change(updateSize);

function updateSize() {
   unit = $("#unit_type").val();
   if(unit == "in") {
            var widthInch = $("#resizable").width() / 200;
            var heightInch = $("#resizable").height() / 200;

            $(".width").val(widthInch + '' + ' Inches');
            $(".height").val(heightInch + '' + ' Inches');
   } else if(unit == "cm") {
            var widthCM = $("#resizable").width() / 200 * 2.54;
            var heightCM = $("#resizable").height() / 200 * 2.54;

            $(".width").val(widthCM + '' + ' CM');
            $(".height").val(heightCM + '' + ' CM');
   }
}
于 2012-06-12T15:57:32.287 回答