I want to hover over createJS labels and show english translation output only for the chinese label (Ex: "Wan" would show "Bowl") that I hover over.
1) So I add all my labels on create to an array
2) Then loop through all labels in hitTest()
and add mouseover/mouseout handler to them
3) then handleMouseEvent()
will call toggle english label on or off depending on hover
4) then toggleItemLabel()
loops through all createJS containers containing that label... if the hovered Chinese word matches the label that belongs to the container, then it will set that second english label's input, and show it.
This works fine, except the toggleItemLabel()
seems to continue looping through all labels in allMyLabels[]
even after it has found a match and returned.
As you can see from the output, it's showing 4 outputs... which means it's not returning/exiting the loop when it finds a match.
Why is this?
Output:
Lee Xian Sheng, Lee Xian Sheng
Lee Xian Sheng, Lee Xian Sheng
Lee Xian Sheng, Lee Xian Sheng
Lee Xian Sheng, Lee Xian Sheng
function hitTest() {
for (var i = 0 ; i < allMyLabels.length; ++i) {
allMyLabels[i].on("mouseover", handleMouseEvent);
allMyLabels[i].on("mouseout", handleMouseEvent);
}
}
function handleMouseEvent(evt) {
for (var i = 0 ; i < allMyLabels.length; ++i) {
if (evt.type === "mouseover") {
toggleItemLabel(allMyLabels[i].text, false);
}
else {
toggleItemLabel(allMyLabels[i].text, true);
}
}
}
function toggleItemLabel(word, hide) {
for (var i = 0; i < All_Items_Array.length; i++) {
for (var j = 0; j < All_Items_Array[i].children.length; j++) {
log(word + ", " + All_Items_Array[i].children[j].children[1].text);
if (word === All_Items_Array[i].children[j].children[1].text) {
if (hide) {
return All_Items_Array[i].children[j].children[2].text = "";
}
else {
return All_Items_Array[i].children[j].children[2].text = All_Items_Array[i].children[j].name;
}
}
}
}
stage.update();
}
EDIT: to give some insight as to what is in All_Items_Array:
When a new item is created:
function createNewItem(itemObj) {
if (itemObj.name != "undefined") {
if (!checkIfExists(itemObj.name) || itemObj.quest_name == null) {
container = new createjs.Container();
bitmap = new createjs.Bitmap(itemObj.path);
container.x = itemObj.x;
container.y = itemObj.y;
container.name = itemObj.name;
container.taskNum = 0;
cn_label = new createjs.Text(itemObj.cn_name, "14px Arial", "white");
cn_label.y = -45;
en_label = new createjs.Text("", "14px Arial", "black");
en_label.y = -25;
//loop through all labels, check hittest for each
allMyLabels.push(cn_label);
container.addChild(bitmap, cn_label, en_label);
container.cn = itemObj.cn_name;
if (itemObj.itemType === "newItem") {
container.count = 0;
ContainerOfItems.addChild(container);
}
else {
container.questName = itemObj.quest_name;
ContainerOfPeople.addChild(container)
}
}
else {
log(itemObj.quest_name + " already added...");
}
}
hitTest(); //add mouse listeners to newly added labels
stage.update();
}
And All_Items_Array.push(ContainerOfPeople, ContainerOfItems);
EDIT 2 : tried break statements in the loop instead of returns:
Now when I hover over label, it returns english labels for all chinese labels:
The first console.log()
outputs all items in array, regardless if word===label text
or not. This is wrong. Hovering over wan
should only return when wan === wan
:
wǎn , Lee Xian Sheng
wǎn , fàn
wǎn , shūcài
wǎn , wǎn
text: bowl, result: bowl
Updated toggleItemLabel()
code:
function toggleItemLabel(word, hide) {
var result = "", label = "";
for (var i = 0; i < All_Items_Array.length; i++) {
for (var j = 0; j < All_Items_Array[i].children.length; j++) {
log(word + ", " + All_Items_Array[i].children[j].children[1].text);
if (word === All_Items_Array[i].children[j].children[1].text) {
label = All_Items_Array[i].children[j].children[2];
if (hide) {
result = "";
break;
}
else {
result = All_Items_Array[i].children[j].name;
break;
}
}
}
}
label.text = result;
log("text: " + label.text + ", result: " + result);
return label;
}
I would rewrite that to look more like
function hitTest() {
$(allMyLabels).on('mouseenter mouseleave', function(e) {
var word = $(this).text,
hide = e.type == 'mouseenter';
$.each(All_Items_Array, function(_, arr) {
$.each(arr.children, function(_, child) {
var w = child.children[1].text;
log(word + ", " + w);
if (word == w) {
child.children[1].text = hide ? child.name : '';
}
});
});
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.