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高度和寬度

回答

相關問題