如果语句返回未定义但仍传递正确的返回值？ Javascript

Question

这个脚本有效……但它没有意义。

上下文我对 js 很陌生...这个脚本一个一个地改变元素的不透明度，当试图实现悬停“覆盖”时，我必须找到一种方法来转换悬停的元素id 到循环通过的脚本使用的索引。这样，流程就会从悬停的元素重置/恢复。

问题 我的问题在于 if 语句将 ids 转换为“idConvertNum”函数中的索引 #s。即使 id 与字符串值相同，if 语句值都返回 undefined！？只有 else(4) 通过。奇怪的是接收转换索引的“i”接收到正确的值？？ ……我，好糊涂。

非常感谢，如果您有任何提示，我们将不胜感激！

html

<!--main content start-->
<div id="main-container">
<div id="iconGrid">
    <div id="arrowText1" class="arrow">→</div>
    <div id="arrowText2" class="arrow">→</div>
    <div id="arrowText3" class="arrow">→</div>
    <div id="arrowText4" class="arrow">→</div>
    <i id="suppDirIcon"><img onmouseover="onHover(id)" onmouseleave="offHover(id)" id="icon1" class="iconFlow" src="/assets/supplier directory icon.png" alt="supplier directory"></i>
    <i id="videoMeetIcon"><img onmouseover="onHover(id)" onmouseleave="offHover(id)" id="icon2" class="iconFlow" src="/assets/video meeting icon.png" alt="video meetings"></i>
    <i id="factInspIcon"><img onmouseover="onHover(id)" onmouseleave="offHover(id)" id="icon3" class="iconFlow" src="/assets/inspection icon.png" alt="factory inspections"></i>
    <i id="orderSupIcon"><img onmouseover="onHover(id)" onmouseleave="offHover(id)" id="icon4" class="iconFlow" src="/assets/supervision icon.png" alt="order supervision"></i>
    <i id="payProtIcon"><img onmouseover="onHover(id)" onmouseleave="offHover(id)" id="icon5" class="iconFlow" src="/assets/pay icon.png" alt="payment protection"></i>
    <div id="suppDirText" class="iconFlowText">Supplier directory</div>
    <div id="videoMeetText" class="iconFlowText">Video meetings</div>
    <div id="factInspText" class="iconFlowText">Factory inspections</div>
    <div id="orderSupText" class="iconFlowText">Order supervision</div>
    <div id="payProtText" class="iconFlowText">Payment Protection</div>
</div>
<hr class="dividerLine">

Javascript

var iconText = [];
var iconImg = [];
var time = 5000;

// icon subtext
iconText[0] = document.getElementById("suppDirText");
iconText[1] = document.getElementById("videoMeetText");
iconText[2] = document.getElementById("factInspText");
iconText[3] = document.getElementById("orderSupText");
iconText[4] = document.getElementById("payProtText");
// icons
iconImg[0] = document.getElementById("icon1");
iconImg[1] = document.getElementById("icon2");
iconImg[2] = document.getElementById("icon3");
iconImg[3] = document.getElementById("icon4");
iconImg[4] = document.getElementById("icon5");
// starting indexes
var i = 0;
var j = iconImg.length - 1;
// converts id of hovered element to associated index
function idConvertNum(id){
    if (id == "icon1"){ return 0;}
    else if (id == "icon2"){ return 1;}
    else if (id == "icon3"){ return 2;}
    else if (id == "icon4"){ return 3;} // all undefined ??? the ids are == to the strings? why?
    else { return 4;} // always returns 4, no matter which element is hovered ???
}
// resets flow to hovered element
function onHover(id){ // passes element id through html "onmouseenter"
    clearInterval(iconTimer); // stops interval
    changeIconBack(j); // resets all to default
    i = idConvertNum(id); // sets i to index value converted from id

                console.log(idConvertNum()) // always returns 4 but script works as intended?

    if (i==0){ // pairs j to new i
        j = iconImg.length - 1;
    } else {
        j = i - 1;
    };
    iconFlow(); // calls update func
}
// continues flow from last hovered element
function offHover(id){ // passes element id through html "onmouseleave"
    i = idConvertNum(id); // sets i to index value converted from id
    if (i==0){ // pairs j to new i
        j = iconImg.length - 1;
    } else {
        j = i - 1;
    };
    iconFlow(); // calls update func
    iconTimer = setInterval(iconFlow, time); // starts interval flow
}

function changeIcon(i){ // if making changes, remember to match .css file styles
    iconText[i].style.opacity = "1";
    iconImg[i].style.opacity = "1";
    iconImg[i].style.width="90px";
}
function changeIconBack(j){ // if making changes, remember to match .css file styles
    iconText[j].style.opacity = "0.4";
    iconImg[j].style.opacity = "0.4";
    iconImg[j].style.width="70px";
}

function iconFlow(){
    changeIconBack(j)
    changeIcon(i);
    j = i;
    i = (i + 1) % iconImg.length; // used modular arithmetic
}

var iconTimer = setInterval(iconFlow, time);
window.onload=iconFlow;

Answer 1

您应该记录i 或idConvertNum(id)，而不是不带参数调用idConvertNum 的结果，因为这将始终返回默认值4。

function onHover(id){ // passes element id through html "onmouseenter"
    clearInterval(iconTimer); // stops interval
    changeIconBack(j); // resets all to default
    i = idConvertNum(id); // sets i to index value converted from id

    console.log(i)

    if (i==0){ // pairs j to new i
        j = iconImg.length - 1;
    } else {
        j = i - 1;
    };
    iconFlow(); // calls update func
}