jQuery가 요소의 CSS 높이 및 너비를 업데이트하지 않습니다.

Question

Wordpress에서 100 % 작동하도록이 응용 프로그램 기능을 사용하는 데 많은 어려움을 겪었습니다. Wordpress 밖에서 서버에 응용 프로그램의 작동 버전이 있지만, Wordpress가 관련되면 펑키하게됩니다.

내가 지금 당면한 문제는 사용자가 이미지의 일부를 잘라내어 qr 코드의 가운데에 표시 할 수있는 프로세스의 두 번째 단계에 있다는 것입니다. Here 작업 예제를 볼 수 있고 어떤 일이 발생해야하며 here은 두 번째 단계에서 깨지는 부분을 볼 수 있습니다. jQuery가 제대로 작동하는 것 같아서 Wordpress 테마의 어딘가에 CSS 충돌이 있다고 생각합니다. 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 

가 지금 이유를 찾고.

---

아하 : 두 페이지에

자바 스크립트가 동일하지 않습니다!

---

이제는 Jcrop 콜백 함수가 전혀 호출되지 않은 것처럼 보입니다. 이유를 모르겠다.

---

두 페이지는 Jcrop의 다른 버전을 사용하고 있습니다. working implementation has v0.9.9이고 작동하지 않는 것은 what appears to be 0.9.8입니다.