当光标悬停在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); 
} 

我试着添加上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您正在使用=赋值运算符而不是==比较运算符，因此您的第一个条件总是匹配。

的fonction更正：

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); 
     });