未捕获的类型错误：无法读取未定义的属性“ui”。选择croparea时出现JQuery JCrop问题

Posted 2023-02-25

【中文标题】未捕获的类型错误：无法读取未定义的属性“ui”。选择croparea时出现JQuery JCrop问题

【英文标题】：Uncaught TypeError: Cannot read property 'ui' of undefined. JQuery JCrop issue when selecting croparea

【发布时间】：2014-08-28 17:13:37

【问题描述】：

我正在使用 JCrop 并且有一个 非常 烦人的时刻，我无法让这个 ui 未定义的东西脱离这个世界:(

我已经完成了与这个小提琴示例 here 完全相同的操作，而这个......就像一个魅力......

这是我加载脚本文件的顺序：

<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="Scripts/jquery.Jcrop.min.js"></script>
<script src="scripts.js"></script>
<script src="photoAppScripts/globalscripts.js"></script> // JCrop logic goes here..

这是……应该可以工作的 html。

<img id="cropbox" class="left"   src="" />
    <div class="container left">
        <div id="Image4" class="Image1 image clip3">
            <svg  >
                <use xlink:href="#fullHex" />
            </svg>
        </div>
    </div>

这是我将图像作为源加载的方式（工作！） 我必须首先启动 JCrop，因为我正在从 $http GET 调用加载图像的源和背景的背景源。但是..它应该像它应该的那样工作..

$('#cropbox').attr('src', trimmedResult);
$('#Image4').css('background-image', 'url(' + trimmedResult + ')');
initJcrop();

这是 GlobalScripts.JS 中的 initJcrop 函数：

function initJcrop() 

var jcrop_api;

jQuery.browser = ;
(function () 
    jQuery.browser.msie = false;
    jQuery.browser.version = 0;
    if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) 
        jQuery.browser.msie = true;
        jQuery.browser.version = RegExp.$1;
    
)();

$('#cropbox').Jcrop(
    onSelect: showCoords,
    onChange: showCoords,
    bgOpacity: .4,
    aspectRatio: 1,
, function() 
    jcrop_api = this;
);

function showCoords(c) 

    var $this = jcrop_api.ui.holder;
    var original = $this.prev();
    var preview = original.parent().find(".image");

    var oH = original.height();
    var oW = original.width();

    var pH = preview.height();
    var pW = preview.width();

    var sH = c.h;
    var sW = c.w;

    var differenceH = pH - sH;
    var differenceW = pW - sW;

    var rW = pW / c.w;
    var rH = pH / c.h;

    preview.css("background-size", (oW * rW) + "px" + " " + (oH * rH) + "px");
    preview.css("background-position", rW * Math.round(c.x) * -1 + "px" + " " + rH * Math.round(c.y) * -1 + "px");

CSS 与上面的小提琴示例完全一样...

有人在这方面给我任何提示吗？我被卡住了:(

【参考方案1】：

好吧..在头撞和扯掉我的头发之后......这个问题值得一个答案，无论它多么明显......

也会发出警告 :) 使用“this”以及在何种上下文中使用它时要非常小心。“this”在一个上下文中，当然可能......在另一个上下文中是其他东西..但我们大多数人都知道..

嗯.. 只是提醒我自己.. 小心 this 和 $this 以及何时使用它:)

取而代之的是...参考对象本身以确定...例如。

var $this = $('#cropbox').ui.holder;