jQuery不更新元素的CSS高度和宽度

Question

让这个应用程序的功能在 Wordpress 中 100% 工作我遇到了很多麻烦。我在 Wordpress 之外的服务器上有一个应用程序的工作版本，但是当涉及到 Wordpress 时，事情变得很奇怪。

我现在遇到的问题是该过程的第二步，当用户可以裁剪图像的一部分以显示在二维码的中心时。 Here 你可以看到工作示例以及应该发生什么，here 你可以看到它在第二步中的中断位置。我猜在 Wordpress 主题的某个地方存在 CSS 冲突，因为 jQuery 似乎工作正常。 Inspect 元素显示在工作示例中，边距和高度/宽度正在通过裁剪选择动态调整，但在损坏的示例中，高度/宽度根本没有调整。我尝试禁用主题中的所有 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

现在调查为什么会这样。

---

啊哈：

两个页面的JavaScript不一样！

---

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

---

这两个页​​面也使用不同版本的 Jcrop。 working implementation has v0.9.9，不工作的是使用what appears to be 0.9.8。