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

如何解决如果语句返回未定义但仍传递正确的返回值？ JavaScript

此脚本有效...但是没有意义。

上下文我对js很陌生...该脚本逐个更改元素的不透明度，当尝试实现悬停的“覆盖”时，我不得不找到一种方法来转换悬停的元素id到旋转脚本所使用的索引。这样一来，流程就会从悬停的元素中重置/恢复。

问题我的问题是在if语句中，将id转换为“ idConvertNum”功能中的索引号。即使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;

解决方法

您应该记录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
}