在 document.getElementById.src 中使用数组无效

Question

我正在尝试使用数组（或 var）输入到标签的 src 中。当我使用 url 的文本时，浏览器可以显示第二个 src，但是当我将它变成 var 数组时，它似乎不起作用：

这是我的 html:

    <iframe id="myFrame" src= "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24190.105180007897!2d-73.84374818788723!3d40.72323027714316!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25e394b6cc0b9%3A0xf15c2215b49863c4!2zUmVnbyBQYXJrLCDXp9eV15XXmdeg16EsINeg15nXlSDXmdeV16jXpywg15DXqNem15XXqiDXlNeR16jXmdeq!5e0!3m2!1siw!2sil!4v1609851520165!5m2!1siw!2sil" > </iframe>

    <div class="btn-container">
        <button class="switch-buttons" id="prevbutton" >Prev Location</button> 
        <button class="switch-buttons" id="nextbutton" onclick="myFunction()">Next Location</button>
    </div>

这是我的 Js:

let jlm = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d108513.70308822051!2d35.10531865599252!3d31.796299428569416!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d7d634c1fc4b%3A0xd96f623e456ee1cb!2sJerusalem!5e0!3m2!1sen!2sil!4v1610023043184!5m2!1sen!2sil";

let rome = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d190029.0177339561!2d12.395913509664267!3d41.90998597323602!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f6196f9928ebb%3A0xb90f770693656e38!2sRome%2C%20Metropolitan%20City%20of%20Rome%2C%20Italy!5e0!3m2!1sen!2sil!4v1610023162463!5m2!1sen!2sil";

let listOfCitys = [jlm, rome];


function myFunction() {

    document.getElementById("myFrame").src = listOfCitys[0];

}

我正在尝试创建一个循环，以便每次单击 btn 时它都会迭代数组中的 src。但是仅仅将其中一个变量放入 src 是行不通的。

谢谢！

Answer 1

开始跟踪当前处于活动状态的位置。这可能看起来像：

let currentCityIndex = 0;

这样你就可以 select 来自 listOfCitys 数组的 src。

listOfCitys[currentCityIndex];

当您想转到下一个时递增索引并 select 数组中的新项目。

currentCityIndex++;
listOfCitys[currentCityIndex];

对之前的递减做同样的事情。

currentCityIndex--;
listOfCitys[currentCityIndex];

现在 currentCityIndex 不知道 listOfCitys 数组有多少项。因此，在递增或递减之前，您必须检查当前状态以及下一个操作是否在数组的最小和最大范围内（0 和 listOfCitys.length - 1）。

const frame = document.getElementById("myFrame");

const prevCity = document.getElementById('prevbutton');
const nextCity = document.getElementById('nextbutton');

let jlm = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d108513.70308822051!2d35.10531865599252!3d31.796299428569416!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1502d7d634c1fc4b%3A0xd96f623e456ee1cb!2sJerusalem!5e0!3m2!1sen!2sil!4v1610023043184!5m2!1sen!2sil";
let rome = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d190029.0177339561!2d12.395913509664267!3d41.90998597323602!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f6196f9928ebb%3A0xb90f770693656e38!2sRome%2C%20Metropolitan%20City%20of%20Rome%2C%20Italy!5e0!3m2!1sen!2sil!4v1610023162463!5m2!1sen!2sil";

let listOfCitys = [jlm, rome];
let currentCityIndex = 0;

prevCity.addEventListener('click', () => {
  // If the current index is already the first item..
  if (currentCityIndex === 0) {
    // ..Then go to the last..
    currentCityIndex = listOfCitys.length - 1;
  } else {
    // ..Otherwise to the previous.
    currentCityIndex--;
  }
  frame.src = listOfCitys[currentCityIndex];
});

nextCity.addEventListener('click', () => {
  // If the current index is already the last item..
  if (currentCityIndex === listOfCitys.length - 1) {
    // ..Then go to the start..
    currentCityIndex = 0;
  } else {
    // ..Otherwise to the next.
    currentCityIndex++;
  }
  frame.src = listOfCitys[currentCityIndex];
});

<iframe id="myFrame" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24190.105180007897!2d-73.84374818788723!3d40.72323027714316!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25e394b6cc0b9%3A0xf15c2215b49863c4!2zUmVnbyBQYXJrLCDXp9eV15XXmdeg16EsINeg15nXlSDXmdeV16jXpywg15DXqNem15XXqiDXlNeR16jXmdeq!5e0!3m2!1siw!2sil!4v1609851520165!5m2!1siw!2sil"> </iframe>

<div class="btn-container">
  <button class="switch-buttons" id="prevbutton">Prev Location</button>
  <button class="switch-buttons" id="nextbutton">Next Location</button>
</div>

在 document.getElementById.src 中使用数组无效

Using array in document.getElementById.src not working

javascript

html

arrays

iframe

src