我在HTML5畫布上有幾個圖像,並且我想調用一個函數,該函數將更新顯示在HTML <p></p>
標記中的文本光標懸停在這些圖像之一上。 的圖像正在使用下面的函數畫到畫布:當光標懸停在HTML5畫布上的圖像上時,更新段落中顯示的文本
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");
}
任何人有任何想法,爲什麼它總是更改文本到文本的第一個圖像,而不是對應於任何其他圖像的文本?我已經設置它將文本更改爲數組的不同元素,具體取決於光標懸停在哪個圖像上,所以它應該爲每個圖像顯示與該數組不同的元素...
這將使至少在理論上有義...但我已經將if語句中的每一個都改爲if(canvasImage.id ==「assetBox」)'等等,現在當我在瀏覽器中查看頁面時,我仍然得到控制檯日誌「displayAssetDescriptionTip()在mouseover事件上被調用「只要光標懸停在其中一個圖像上,所以函數顯然被調用,但是文本在第四行e段沒有更新......任何想法,爲什麼這是? – someone2088 2013-02-26 13:06:09
我以您在第一個建議中完成的方式更改了我的代碼 - 但現在我遇到了上述問題,其中段落的內容根本沒有更新。 – someone2088 2013-02-26 13:07:40
我編輯了答案。 – 2013-02-26 13:12:21