javascript - Jquery .offset() setter 不起作用

Question

我正在为某个站点制作一个功能，这有助于将对象分组到一个 div 中，然后将其更改为组、调整大小、旋转等。我在将已编辑对象的参数保存在 div 中时遇到问题。调整大小后，我必须更正它们在工作区中的位置，但 jquery .offset() 似乎不起作用。

function grouped_objects_saving(merged_block_id){ 
    var count = $("#"+merged_block_id+" > .merged").length;
    var angle = transform_to_angle(merged_block_id);
    var scaleX = transform_to_scale(merged_block_id, "x");
    var scaleY = transform_to_scale(merged_block_id, "y");
    var brows = browser();
    var topOff = [];
    var leftOff = [];
    var objId = [];
    var width = [];
    var height = [];
    var imageAngle = [];
    var resultAngle = [];
    var transform = "";
    var check = false;
        switch(brows){
            case "Chrome":
                transform = $('#'+merged_block_id).css('-webkit-transform');
            break;
            case "IE":
                transform = $('#'+merged_block_id).css('-ms-transform');
            break;
            case "Firefox":
                transform = $('#'+merged_block_id).css('-moz-transform');
            break;
            default:
                transform = $('#'+merged_block_id).css('transform');
            break;
        }
        for (i=0; i<count; i++) {
            objId[i] = $("#"+merged_block_id+" > .merged").eq(i).attr('id');
            topOff[i] = $("#"+merged_block_id+" > .merged").eq(i).offset().top;
            leftOff[i] = $("#"+merged_block_id+" > .merged").eq(i).offset().left;
            width[i] = $("#"+objId[i]).width();
            height[i] = $("#"+objId[i]).height();
            imageAngle[i] = transform_to_angle(objId[i]);
            resultAngle[i] = imageAngle[i]+angle;
            $("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});
        }
        for (i=0; i<count; i++) {
            $("#"+objId[i]).appendTo($('#workarea'));
            switch(brows){
                case "Chrome":
                    $("#"+objId[i]).css({'-webkit-transform': 'rotate('+resultAngle[i]+'deg)'});
                break;
                case "IE":
                    $("#"+objId[i]).css({'-ms-transform': 'rotate('+resultAngle[i]+'deg)'});
                break;
                case "Firefox":
                    $("#"+objId[i]).css({'-moz-transform': 'rotate('+resultAngle[i]+'deg)'});
                break;
                default:
                    $("#"+objId[i]).css({'transform': 'rotate('+resultAngle[i]+'deg)'});
                break;
            }
            $("#"+objId[i]).width(width[i]*scaleX);
            $("#"+objId[i]).height(height[i]*scaleY);
            $("#"+objId[i]).appendTo($('#'+merged_block_id));
            //$("#"+objId[i]).addClass("editable selectable"); 
            if (i==count-1) {
                check = true;
            }
        }
        if (check==true){
            for (i=0; i<count; i++) {
                console.log('$("#'+objId[i]+'").offset({top:'+topOff[i]+', left:'+leftOff[i]+'});');
                $("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});
            }
        }
    return true;
}

问题在最后一个字符串中:

$("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});

如果我复制来自控制台的字符串:

console.log('$("#'+objId[i]+'").offset({top:'+topOff[i]+', left:'+leftOff[i]+'});'

例如

$("#custom-image-58clx").offset({top:393.089111328125, left:407.17822265625});

并在控制台中使用它，有效，偏移设置正确。

我不知道为什么它在代码中不起作用。

Answer 1

我仍然不知道为什么原始代码不起作用并且没有应用 .offset，但在将代码更改为下面的代码后，它工作正常。

function grouped_objects_saving(merged_block_id, type){ 
    var count = $("#"+merged_block_id+" > .merged").length;
    var angle = transform_to_angle(merged_block_id);
    var scaleX = transform_to_scale(merged_block_id, "x");
    var scaleY = transform_to_scale(merged_block_id, "y");
    console.log("scaleX: " + scaleX);
    console.log("scaleY: " + scaleY);
    var brows = browser();
    var transform = "";
        switch(brows){
            case "Chrome":
                transform = $('#'+merged_block_id).css('-webkit-transform');
            break;
            case "IE":
                transform = $('#'+merged_block_id).css('-ms-transform');
            break;
            case "Firefox":
                transform = $('#'+merged_block_id).css('-moz-transform');
            break;
            default:
                transform = $('#'+merged_block_id).css('transform');
            break;
        }
    var topOff = [];
    var leftOff = [];
    var objId = [];
    var width = [];
    var height = [];
    var imageAngle = [];
    var resultAngle = [];
    for (i=0; i<count; i++) {
        objId[i] = $("#"+merged_block_id+" > .merged").eq(i).attr('id');
        topOff[i] = $("#"+merged_block_id+" > .merged").eq(i).offset().top;
        leftOff[i] = $("#"+merged_block_id+" > .merged").eq(i).offset().left;
        width[i] = $("#"+objId[i]).width();
        height[i] = $("#"+objId[i]).height();
        imageAngle[i] = transform_to_angle(objId[i]);
        resultAngle[i] = imageAngle[i]+angle;
        $("#"+objId[i]).offset({top: topOff[i], left: leftOff[i]});
        console.log("resultAngle: "+ resultAngle[i]);
        console.log("ObjId: "+objId[i]);
        console.log("topOff: "+topOff[i]);
        console.log("leftOff: "+leftOff[i]); 
    }
   for (i=0; i<count; i++) {
               $("#"+objId[i]).removeAttr('style');
               $("#"+objId[i]).appendTo($('#workarea'));
               $("#"+objId[i]).css({
                   'width': width[i]*scaleX+"px",
                   'height': height[i]*scaleY+"px",
                   '-webkit-transform': 'rotate('+resultAngle[i]+'deg)',
                   '-ms-transform': 'rotate('+resultAngle[i]+'deg)',
                   '-moz-transform': 'rotate('+resultAngle[i]+'deg)',
                   'transform': 'rotate('+resultAngle[i]+'deg)',
                   'position': 'absolute'
               }).offset({top: topOff[i], left: leftOff[i]});
        }
    }
    return true;
}

我想这是由错误的操作顺序引起的。