for 循环的 document.getElementById 问题答案

【问题标题】：document.getElementById issues with for loopfor 循环的 document.getElementById 问题
【发布时间】：2020-09-12 04:07:32
【问题描述】：

我的代码从后端 API 获取数据

for (var i = 0; i < myObj.length; i++) {}

我想在变量中显示的存储对象，并且我能够相应地显示它们

一切都很好，直到这里但我想在弹出窗口中显示描述

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

基于本教程我已经实现了相同的

     html1 += `  <div class="popup"  onclick="myFunction()">Click me to toggle the popup!
  <span class="popuptext" id="myPopup">${desc}</span>
</div>
            <p > ${desc}</p>
<script>
function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");

  }</script>
         
            `;

但是当我点击它时，我希望不同的卡片会相应地显示不同的数据，但它只是显示第一个卡片元素的数据

当点击第二个时，只会弹出第一个卡片元素，其中仅包含该卡片的特定数据我认为问题可能是因为 ID 所以将动态变量作为 id 但它没有用点击时什么都没有出现甚至没有错误有什么方法可以根据弹出窗口中的卡片显示动态数据

【问题讨论】：

我感觉这与 for 循环以及您使用 i 的方式有关。尝试将 i 声明更改为 let i = 0 而不是 var i = 0，看看效果如何。

标签： javascript html css json api

【解决方案1】：

ID 必须是唯一的

使用循环编号对函数进行唯一调用，并为每个跨度分配自己的 ID。

     html1 += `  <div class="popup"  onclick="myFunction('${i}')">Click me to toggle the popup!
  <span class="popuptext" id="myPopup-${i}">${desc}</span>
</div>
            <p > ${desc}</p>

您只需要一个脚本块即可

<script>
function myFunction(id) {
    var popup = document.getElementById("myPopup-"+id);
    popup.classList.toggle("show");

  }</script>

【讨论】：

【解决方案2】：

我认为这是因为您重复使用了相同的 ID。在 html 中，元素 ID 必须是唯一的。您可以尝试在循环时将序列号附加到id="myPopup"，例如id="myPopup1"、id="myPopup2" 等等……

【讨论】：

我已经提到我使用了基于数据的动态变量，但仍然无法解决问题

【解决方案3】：

问题是因为您使用的是 id 属性。出于这个原因，第一个对象有效而其他对象无效，Javascript 将 id 用于第一个找到的对象，然后丢弃其他对象。

尝试按类为每个按钮提供操作。像这样的：

const buttons = [...document.querySelectorAll('.btn-toggle')]

buttons.forEach(button => button.addEventListener('click', e => click(e)))

const click = e => e.target.parentElement.children[1].classList.toggle('show')

.show {
  color: red;
  display: block!important;
}

.hide{
  display: none
}

<div>
  Hello from div 1
  <button class="btn-toggle">Toggle</button>
  <div class="hide">Toggle!</div>
</div>
<div>
  Hello from div 2
  <button class="btn-toggle">Toggle</button>
  <div class="hide">Toggle!</div>
</div>
<div>
  Hello from div 3
  <button class="btn-toggle">Toggle</button>
  <div class="hide">Toggle!</div>
</div>

【讨论】：

您不需要使用querySelectorAll 进行传播，因为它返回提供forEach 的NodeList。在不支持的浏览器中，也不支持传播。

【解决方案4】：

正如大家所写，id 是唯一的才能正常工作。

如果你改变你的css来响应.popup.show它会变得更简单：

//REM: this = div.popup
function myFunction(div){
  div.classList.toggle('show');
}

.popup span{
  display: none
}

.popup.show span{
  display: block
}

&lt;div class = 'popup' onclick = 'myFunction(this)'&gt;click&lt;span&gt;clicked&lt;/span&gt;&lt;/div&gt;

【讨论】：