Блог

Этот скрипт работает… Но это не имеет смысла.

Контекст Я очень новичок в js… Этот скрипт изменяет непрозрачность элемента один за другим, при попытке реализовать «переопределение» наведения, мне пришлось найти способ преобразовать идентификатор наведенных элементов в индекс, используемый скриптом, который выполняет поворот. Таким образом, поток сбрасывается / возобновляется с зависшего элемента.

Проблема Моя проблема заключается в том, что оператор if преобразует идентификаторы в index #s в функции «idConvertNum». Все значения оператора if возвращают неопределенное, даже если идентификаторы совпадают со строковыми значениями!? Проходит только 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
}