Question

我在使用此应用程序的功能在Wordpress中100％工作时遇到了很多麻烦。我在Wordpress之外的服务器上有一个应用程序的工作版本，但是当Wordpress涉及到的东西变得很时髦。

我现在遇到的问题是在该过程的第二步，当用户可以裁剪要在qr代码的中心显示的图像的一部分时。 Here您可以看到工作示例以及应该发生的事情，here您可以看到它在第二步中断的位置。我猜测Wordpress主题中某处存在CSS冲突，因为jQuery似乎工作正常。检查元素显示工作示例中的，边缘和高度/宽度正在使用裁剪选项进行动态调整，但在破碎的示例中，高度/宽度根本没有调整。我已经尝试禁用主题上的所有CSS文件，但无济于事。

这是我们用来更新右边图像的jQuery，因为左边的图像被裁剪了。我们使用的插件是jcrop。问题是在工作版本上，高度和宽度使用内联css正确更新，但在破坏版本上这些值不是，但边距在两个版本上都能正常工作。

//function to update preview divs
jQuery(function($){
    var jcrop_api, boundx, boundy; //set jcrop variables

    function updatePreview(c)
    {
        if (parseInt(c.w) > 0)
        {
            var rx = 73 / c.w;
            var ry = 73 / c.h;

            jQuery('#preview').css({
                width: Math.round(rx * boundx) + 'px !important',
                height: Math.round(ry * boundy) + 'px !important',
                marginLeft: '-' + Math.round(rx * c.x) + 'px !important',
                marginTop: '-' + Math.round(ry * c.y) + 'px !important'
            });
        }
    };

    //function to update coordinates
    function updateCoords(c)
    {
        jQuery('#x').val(c.x);
        jQuery('#y').val(c.y);
        jQuery('#w').val(c.w);
        jQuery('#h').val(c.h);
    };

    jQuery(window).load(function () {
        var PathToFile = jQuery('#cropImageDisplay').attr("name");
        jQuery('#cropImageDisplay').load("/wp-content/themes/howfarqr/resources/php/uploadedImage.php?fn="+PathToFile).hide().fadeIn('slow', function() {
            jQuery('#cropbox').Jcrop({ //jcrop selector
                onChange: updatePreview, //function to execute onChange
                onSelect: updateCoords, //function to execute onSelect
                aspectRatio: 1 //asepct ratio
            },function(){ //callback function
                    var bounds = this.getBounds(); // get the real image size
                boundx = bounds[0]; //assign x
                boundy = bounds[1]; //assign y
                //store jcrop api as jcrop variable
                jcrop_api = this;
            });
        });
    });
});

Answer 1

问题与boundx和boundy未定义有关。查看传递给.css()的对象（使用断点）：

> console.log({
    width: Math.round(rx * boundx) + 'px',
    height: Math.round(ry * boundy) + 'px',
    marginLeft: '-' + Math.round(rx * c.x) + 'px',
    marginTop: '-' + Math.round(ry * c.y) + 'px'
})
▼ Object
    height: "NaNpx"
    marginLeft: "-25px"
    marginTop: "-9px"
    width: "NaNpx"
    __proto__: Object
> boundx
undefined

调查现在的原因。

阿哈：

enter image description here

两页上的JavaScript不完全相同！

现在看来根本没有调用Jcrop回调函数。不知道为什么。

这两页也使用了不同版本的Jcrop。 working implementation has v0.9.9和无效工作正在使用what appears to be 0.9.8。

jQuery没有更新CSS的高度和元素宽度

1 个答案: