當光標懸停在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); 
     });