Javascript for循环的document.getElementById问题

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

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

基于本教程，我实现了相同的功能

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

html1+=`单击我切换弹出窗口！
${desc}
${desc}

函数myFunction（）{
var popup=document.getElementById（“myPopup”）；
popup.classList.toggle（“显示”）；
}
`;

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

当点击第二张卡片时，只有第一张卡片元素会弹出该卡片的特定数据 我认为问题可能是因为ID，所以将动态变量作为ID 但是，当单击“什么都没有出现”时，这是没有用的 甚至没有错误

---

是否有任何方法可以根据弹出窗口中的卡片显示动态数据？我认为这是因为您正在重用相同的id。在html中，元素id必须是唯一的。您可以在循环时尝试向

id=“myPopup”

添加序列号，例如

id=“myPopup1”

，

id=“myPopup2”

等。

问题在于您使用的是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{
颜色：红色；
显示：块！重要；
}
.隐藏{
显示：无
}

第一组你好
切换
切换！
二组你好
切换
切换！
3组的你好
切换
切换！

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>

html1+=`单击我切换弹出窗口！
${desc}
${desc}

对于所有脚本，您只需要一个脚本块

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

  }</script>

函数myFunction（id）{
var popup=document.getElementById（“myPopup-”+id）；
popup.classList.toggle（“显示”）；
}

正如大家所写，

id

必须是唯一的，才能正常工作

如果更改css以响应

.popup.show

，它将变得更简单：

//REM:this=div.popup
函数myFunction（div）{
div.classList.toggle（'show'）；
}

.popup span{
显示：无
}
.popup.show span{
显示：块
}

---

clickclicked

我感觉这与for循环和您如何使用I有关。尝试将i声明更改为

let i=0

而不是

var i=0

，然后看看效果如何。我已经提到，我使用了基于数据的动态变量，但仍然无法解决问题，您不需要使用

querySelectorAll

进行分摊，因为它返回一个

NodeList

，它提供

forEach

。在不支持的浏览器中，也不支持spread。

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

  }</script>