当光标悬停在 HTML5 画布上的图像上时更新段落中显示的文本

Question

我在 HTML5 画布上有几张图片，我想调用一个函数，当光标悬停在其中一张图片上时，该函数将更新 HTML <p></p> 标记中显示的文本。 使用以下函数将图像绘制到画布上：

function drawBox(imageObj, img_x, img_y, img_width, img_height) {
    console.log("function drawBox is drawing the description boxes");
    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: img_width,
      height: img_height,
      // puts the image in the middle of the canvas
      x: img_x,
      y: img_y
    });

    // add cursor styling

    imagesLayer.add(canvasImage);
}

我尝试通过添加一些代码来调用我拥有的将段落内容更新到此函数的函数，从而为每个图像添加一个 on mouseover 函数，所以我的 drawBox 函数现在看起来像这样：

function drawBox(imageObj, img_x, img_y, img_width, img_height) {
    console.log("function drawBox is drawing the description boxes");
    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: img_width,
      height: img_height,
      // puts the image in the middle of the canvas
      x: img_x,
      y: img_y
    });

    // add cursor styling


    canvasImage.on("mouseover", function(){
        //displayAssetDescriptionTip();
        console.log("displayAssetDescriptionTip() is being called on mouseover event");

        });

    imagesLayer.add(canvasImage);
}

当我使用上面的这个函数查看我的页面，并将光标悬停在添加了该函数的图像之一上时，我添加到 mouseover 函数的日志正在显示控制台——所以我知道鼠标悬停工作正常。

但是，我遇到的问题是我想从 mouseover 事件中调用的函数。您会在上面看到，我在mouseover 事件中注释掉了对函数displayAssetDescriptionTip() 的调用。这是我想在光标悬停在这些图像上时调用的函数，但是，它似乎总是将段落中的文本更改为属于第一个描述框的文本......即如果光标将鼠标悬停在我添加了 mouseover 事件的任何图像上，然后文本将更改为属于第一个图像的文本，而不是光标悬停的图像。

函数是：

function displayAssetDescriptionTip(){
    if(canvasImage.id = "assetBox")
        document.getElementById('tipsParagraph').innerHTML = tips[34];
    else if(canvasImage.id = "liabilitiesBox")
        document.getElementById('tipsParagraph').innerHTML = tips[35];
    else if(canvasImage.id = "incomeBox")
        document.getElementById('tipsParagraph').innerHTML = tips[36];
    else if(canvasImage.id = "expenditureBox")
        document.getElementById('tipsParagraph').innerHTML = tips[37];
    else return;

    console.log("displayAssetDescriptionTip being called");
}

任何人都知道为什么它总是将文本更改为第一张图像的文本，而不是对应于任何其他图像的文本？我已将其设置为将文本更改为数组的不同元素，具体取决于光标悬停在哪个图像上，因此它应该为每个图像显示来自该数组的不同元素...

Answer 1

在您的函数 displayAssetDescriptionTip 中，您使用的是 = 赋值运算符而不是 == 比较运算符，因此您的第一个 if 条件始终匹配。

功能更正：

function displayAssetDescriptionTip(canvasImage){
    if(canvasImage.id == "assetBox")
        document.getElementById('tipsParagraph').innerHTML = tips[34];
    else if(canvasImage.id == "liabilitiesBox")
        document.getElementById('tipsParagraph').innerHTML = tips[35];
    else if(canvasImage.id == "incomeBox")
        document.getElementById('tipsParagraph').innerHTML = tips[36];
    else if(canvasImage.id == "expenditureBox")
        document.getElementById('tipsParagraph').innerHTML = tips[37];
    else return;

    console.log("displayAssetDescriptionTip being called");
}

不要忘记将 canvasImage 作为参数传递给您的事件处理程序

 canvasImage.on("mouseover", function(){
        displayAssetDescriptionTip(canvasImage);
        });