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

我有很多麻烦让这个应用程序的功能在Wordpress中工作100％。我在Wordpress之外的服务器上有一个应用程序的工作版本，但是当涉及到Wordpress时，情况会变得很怪异。jQuery不更新元素的CSS高度和宽度

我现在遇到的问题是该过程的第二步，当用户可以裁剪图像的一部分以显示在qr代码的中心时。 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; 
      }); 
     }); 
    }); 
});

来源

2011-11-23 josephndenton

我编辑的工作示例也使用1.6.1，它似乎仍然正常工作。 – josephndenton

查看我的最新编辑。 –

的问题与该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。，而不工作是使用what appears to be 0.9.8。

来源

2011-11-23 18:26:14

就是这样！显然Wordpress包含了开箱即用的jcrop，并且我的入队脚本只是简单地拉取旧版本的jcrop，而不是我上传的新版本。 – josephndenton

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

回答

相关问题