jQuery不更新元素的CSS高度和宽度
我有很多麻烦让这个应用程序的功能在Wordpress中100％工作。 我在Wordpress之外的服务器上有一个应用程序的工作版本，但是当涉及到Wordpress时，情况会变得很怪异。
我现在遇到的问题是该过程的第二步，即用户可以裁剪图像的一部分以显示在qr代码的中心。 在这里你可以看到工作示例和应该发生的事情，在这里你可以看到它在第二步中断的位置。 我猜在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;
});
});
});
});
这个问题与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。 工作实现v.9.9，而不工作是使用似乎是0.9.8。
链接地址: http://www.djcxy.com/p/78169.html