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

Question

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

我现在遇到的问题是该过程的第二步，用户可以裁剪图像的一部分以显示在二维码的中心。 在这里您可以看到工作示例以及应该发生的情况，以及此处 您可以看到它在第二步中中断的位置。我猜测 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。 工作实现版本为 v0.9.9，并且非 -工作是使用 似乎是 0.9.8。