Блог

Я создаю приложение electron и создал меню div с разделами в нем, которые содержат свой собственный HTML-фрейм. Я хочу иметь возможность щелкнуть по определенному span и отобразить его Iframe. Прямо сейчас, когда у меня более одного Iframe в HTML-файле, они отображаются друг над другом. Вот мой HTML:

 <div class="menu">
    <img src="./images/group-30.png" class="logo"></img>

    <span class="menu_spans" id="tasks">
        <img src="images/group-47.png" class="tasks-img"></img>
        <!--<iframe src="tasks.html"></iframe>-->  
    </span>

    <span class="menu_spans" id="add-tasks">
        <img src="images/group-55.png" class="add-tasks-img">
        <iframe src="addTasks.html" scrolling="no" allowtransparency="yes" style="width:1020px; height: 574px; position: relative; top:-350%; left: 57px; border:none;"></iframe>
    </span>

    <span class="menu_spans" id="billing">
        <img src="images/group-60.png" class="billing-img">
        <!--<iframe src="billing.html" scrolling="no" allowtransparency="yes" style="width: 1020px; height: 574px; position: relative; top:-269px; left: 57px; border: none;"></iframe>-->
    </span>

    <span class="menu_spans" id="proxies">
        <img src="images/group-61.png" class="proxies-img">
        <!--<iframe src=""></iframe>-->
    </span>

 etc...
  

Я пробовал что-то подобное, но это не работает:

 let menu_spans = document.querySelectorAll(".menu_spans");

for (var i = 0; i < menu_spans.length; i  ) {
    menu_spans[i].addEventListener('click', () => {
        console.log(this.id);
    });
}
  

Некоторое время назад я уже кодировал это в jQuery, но я не уверен, как это сделать в обычном js.

Любая помощь приветствуется, спасибо!

Вы могли бы использовать что-то вроде этого:

 let menu_spans = document.querySelectorAll(".menu_spans");

for (var i = 0; i < menu_spans.length; i  ) {
  menu_spans[i].addEventListener('click', smth, false);
}

function smth() {
  console.log(this.id);
}
  

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

 let menu_spans = document.querySelectorAll(".menu_spans");

for (var i = 0; i < menu_spans.length; i  ) {
    menu_spans[i].addEventListener('click', (event) => {
           if (event.currentTarget.nodeName === "SPAN") {
           console.log(event.currentTarget.id);
            return true;
           }
    });
}
  

Ссылка на fiddle: fiddle