javascript - sidenav 多个下拉列表的 iframe 更改

Question

我有 index.html，在我的 index.html 中有两个下拉容器和 iframe。

但是它在 iframe 的下拉列表 1 中工作，而下拉列表 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

Answer 1

首先:

因此，ID 应该是唯一的，如果您想在多个元素上使用相同的属性，请使用类!

第二个问题

var mySelect = document.getElementById('mySelect'); 他只找到第一个 child :

<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>

第三个问题

请显示您的完整代码，包括。你的框架