Question

我需要更新x和y值以通过Ajax和PHP裁剪图像。

此代码打开一个对话框窗口，其中单击按钮时会显示图像。工作正常，但Firebug显示NaN后变量。我怎样才能得到正确的值？我已经尝试了parseFloat（）和parseInt（）来返回一个数字变量。

jQuery(function($) {

    jQuery('#jc-hidden-image').Jcrop({
        onChange: showCoords,
        onSelect: showCoords
    });

});

function showCoords(c) {
    jQuery('#x1').val(c.x);
    jQuery('#y1').val(c.y);
    jQuery('#x2').val(c.x2);
    jQuery('#y2').val(c.y2);
    jQuery('#w').val(c.w);
    jQuery('#h').val(c.h);
};
jQuery(function($) {

    $('#jc-dyn-btn').click(function() {
        var jcrop_api;
        var id = $(this).attr('data-id');
        var rel = $(this).attr('data-rel');
        var value = $(this).attr('data-value');
        var mainImage = rel + '/' + id;
        var x, y, w, h;
        x = Math.round($('#x1').val());
        y = Math.round($('#y1').val());
        w = Math.round($('#w').val());
        h = Math.round($('#h').val());
        $("
    img.jc - hidden - image ").attr("
    src ", mainImage);
        var $dialog = $(" < div > < div id = \"jc-dialog\ class=\"jc-dialog\"><img class=\"jc-hidden-image\" src=\"" + mainImage + "\" /><form id=\"coords\" class=\"coords\"><label>X1<input type=\"text\" size=\"4\" id=\"x1\" name=\"x1\" /></label><label>Y1 <input type=\"text\" size=\"4\" id=\"y1\" name=\"y1\" /></label><label>X2 <input type=\"text\" size=\"4\" id=\"x2\" name=\"x2\" /></label><label>Y2 <input type=\"text\" size=\"4\" id=\"y2\" name=\"y2\" /></label><label>W <input type=\"text\" size=\"4\" id=\"w\" name=\"w\" /></label><label>H <input type=\"text\" size=\"4\" id=\"h\" name=\"h\" /></label></form></div>");

        $dialog.find('img').Jcrop({
            onChange: showCoords,
            onSelect: showCoords
        }, function() {
            jcrop_api = this;
            jcrop_api.animateTo([259, 81, 469, 304]);
            $dialog.dialog({
                modal: true,
                title: 'Jcrop in jQuery-ui Dialog (Dynamic)',
                close: function() {
                    $dialog.remove();
                },
                width: jcrop_api.getBounds()[0] + 34,
                resizable: false,
                buttons: {
                    "SAVE": function() {
                        $.ajax({

                            url: "crop.php",
                            type: "POST",
                            data: "x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&src=" + mainImage,

                            success: function() {
                                //  $dialog.dialog('close');
                            }
                        });
                    },
                    "CLOSE": function() {
                        $dialog.dialog('close');
                    }
                }
            }) //dialog
        }); //function
        return false;
    }); //clik
}); //jquery

Answer 1

试试这个，使用parseFloat之类的

Math.round(parseFloat($('#x1').val()));

<强>更新

同时确保您使用正确的id作为输入，无论是$('#x1')还是$('#x')。 Here is an example

Answer 2

您首先需要使用parseFloat。将语句更改为：

x = Math.round( parseFloat($('#x1').val()) );
y = Math.round( parseFloat($('#y1').val()) );
w = Math.round( parseFloat($('#w').val()) );
h = Math.round( parseFloat($('#h').val()) );

Math.round返回NaN

2 个答案: