Question

我使用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');
        }
    });
})

由于

Answer 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');
   }
}

选择菜单需要jQuery Logic

1 个答案: