изменение iframe для нескольких раскрывающихся списков sidenav - PullRequest
0 голосов
/ 06 мая 2019

У меня есть index.html, в моем index.html есть два выпадающих контейнера и iframe.

Но это работает в выпадающем списке номер один с iframe, а выпадающий номер 2 не работает, кто-нибудь может это исправить?

Я не совсем понимаю этот скрипт для изменения iframe:

function iframeChange() {
var buttons = document.querySelector(".dropdown-container");
var iframe = document.getElementById('frame');
var mySelect = document.getElementById('mySelect');

buttons.addEventListener("click", function (e) {
  mySelect.src = e.target.dataset.src;
  mySelect.id = e.target.dataset.id;
  mySelect.width = e.target.dataset.width;
  mySelect.height = e.target.dataset.height;
  mySelect.title = e.target.dataset.title;
  iframe.src = e.target.dataset.src;
  iframe.width = e.target.dataset.width;
  iframe.height = e.target.dataset.height;
  iframe.title = e.target.dataset.title;
});
  }

  window.onload = iframeChange;

мой скрипт работает на локальном ПК

<div id="mySidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<button id="mySelect" class="dropdown-btn">BCA - SALES 
  <i class="fa fa-caret-down"></i>
</button>
<div id="mySelect" class="dropdown-container">
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=83e3821d-2afc-45bd-be16-7d95a1065a8d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD I</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=828499e7-da76-4f1c-aa43-b4accbfbd203&opt=currsel" data-width="100%" data-height="550px">DASHBOARD II</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=89c0893e-d526-4af3-aaf8-68a1d54cb96d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD III</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=7b3fe051-8219-469f-994b-7ea249ee2b73&opt=currsel" data-width="100%" data-height="550px">DASHBOARD IV</a></li>
</div>
<button id="mySelect" class="dropdown-btn">BCA - MARKETING 
  <i class="fa fa-caret-down"></i>
</button>
<div id="mySelect" class="dropdown-container">
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=83e3821d-2afc-45bd-be16-7d95a1065a8d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD I</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=828499e7-da76-4f1c-aa43-b4accbfbd203&opt=currsel" data-width="100%" data-height="550px">DASHBOARD II</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=89c0893e-d526-4af3-aaf8-68a1d54cb96d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD III</a></li>
  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=7b3fe051-8219-469f-994b-7ea249ee2b73&opt=currsel" data-width="100%" data-height="550px">DASHBOARD IV</a></li>
</div>

мой ожидаемый выпадающий список 2 работает.

исходный файл: https://github.com/GoLeR797370/Perpustakaan23.git скачатьmashup.html

1 Ответ

0 голосов
/ 06 мая 2019

Прежде всего:

Следовательно, идентификаторы должны быть уникальными, используйте класс, если хотите использовать одинаковые свойства для нескольких элементов!

Вторая проблема

var mySelect = document.getElementById ('mySelect');он находит только первого ребенка:

<li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=83e3821d-2afc-45bd-be16-7d95a1065a8d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD I</a></li>

или

  <li><a id="mySelect" data-src="https://192.168.90.240/single/?appid=1ab7d1b9-5a9f-4337-9215-7e1e036625d1&sheet=83e3821d-2afc-45bd-be16-7d95a1065a8d&opt=currsel" data-width="100%" data-height="550px">DASHBOARD I</a></li>

третья задача

Пожалуйста, покажите ваш полный код вкл.твой кадр

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...