Как динамически передать идентификатор элемента и вызвать функцию JavaScript?

Question

У меня есть JavaScript-код, как показано ниже -

function initPage(){

    // Left Navigation Pane - moverOver effect:
    document.getElementById("imgHowToBuy").onmouseover = leftNavHoverIn;
    document.getElementById("imgNewAddition").onmouseover = leftNavHoverIn; 
    document.getElementById("imgMostPopular").onmouseover = leftNavHoverIn;
    document.getElementById("imgOffer").onmouseover = leftNavHoverIn;   
    document.getElementById("imgRecentlySold").onmouseover = leftNavHoverIn;
.....
}

В основном мой код работает (функция вызывается и прекрасно выполняется).Но я не думаю, что я использую принципы лучшей практики здесь.Кажется немного странным продолжать вызывать одну и ту же функцию;Могу ли я как-то передать идентификатор элемента в качестве аргумента, а затем выполнить функцию, чтобы все это сводилось к одной строке кода?

Я - самоучка, парень из JS: D

Спасибо!

Answer 1

Вы не «вызываете одну и ту же функцию», вы просто назначаете одну функцию множеству элементов на странице. Я не вижу здесь ничего особенного.

Вы можете хранить идентификаторы всех элементов, которым вы хотите назначить эту функцию, что уменьшит количество строк кода, но нет особой причины для этого.

var leftNavElements = ["imgHowToBuy","imgNewAddition"]; // etc....
for(var i=0;i<leftNavElements.length;i++){
    document.getElementById(leftNavElements[i]).onmouseover = leftNavHoverIn;
}

Answer 2

Попробуйте это:

var ids = ["imgHowToBuy", "imgNewAddition", "imgMostPopular", "imgOffer", "imgRecentlySold"]

var setMouseover = function (id) {
    document.getElementById(id).onmouseover = leftNavHoverIn;
};

for(var i=0;i<ids.length;i++) {
    setMouseover(ids[i]);
}

Answer 3

Вы можете сделать что-то вроде этого:

function assignMouseOver(elem) {
  document.getElementById(elem).onmouseover = leftNavHoverIn;
}

assignMouseOver("imgHowToBuy"); // etc

Вы также можете передавать идентификаторы элементов в виде массива и проходить через массив внутри функции, что сократит его до одной строки (видимого) кода:

function assignMouseOver(elems) {
  if (elems.length>0) {
   for (var i=0; i<elems.length; i++) {
     document.getElementById(elems[i]).onmouseouver = leftNavHoverIn;
   }
  }
}

assignMouseOver(["imgHowtoBuy","etc","etc"]);

Для лучшей практики потребуется больше проверки / подтверждения, но вышеупомянутое должно помочь.

Answer 4

function doTheJob(id)
{
    document.getElementById(id).onmouseover = leftNavHoverIn
}

doTheJob("imgHowToBuy");
doTheJob("imgNewAddition");
doTheJob("imgMostPopular");
doTheJob("imgOffer");
doTheJob("imgRecentlySold");