如何在javascript中显示选定的元素

Question

我想打开一个模式，根据所选文本显示pdf，但只显示列表中的第一个。我该怎么办？索引.html<p><a id="other-activies-link">Semana Omnistack 11</a></p><p><a id="other-activies-link">28ª Semana do IME</a></p><div id="myModal" class="modal"> <div class="modal-content">  <span class="close">&times;</span>  <iframe id="myFrame" frameborder="0" allowfullscreen></iframe> </div></div>脚本.jsconst selectedActivity = document.querySelectorAll("#other-activies-link");selectedActivity.forEach((link) => {  link.addEventListener("click", () => {    document.getElementById(      "myFrame"    ).src = `/files/${event.target.textContent}.pdf`;  });});

Answer 1

你不应该使用相同的元素，它可以在这里工作，但它是令人不快的。我用相同的.当然，不会加载。我已经在代码本身中进行了解释。看，如果它对你有用。idclassiframe

const selectedActivity = document.querySelectorAll(".other-activies-link");

selectedActivity.forEach((link) => {

  link.addEventListener("click", (event) => { // pass event parameter here

  

    document.getElementById(

      "myFrame"

    ).src = `/files/${event.target.innerText}.pdf`; // use innerText instead

    console.clear();

    console.log(event.target.innerText);

    console.log(event.target.textContent);

  });

});

<p><a class="other-activies-link">Semana<br> Omnistack 11</a></p>

<p><a class="other-activies-link">28ª Semana do IME</a></p>

<div id="myModal" class="modal">

 <div class="modal-content">

  <span class="close">&times;</span>

  <iframe id="myFrame" frameborder="0" allowfullscreen></iframe>

 </div>

</div>

请参阅和此处之间的区别。innerTexttextContent




Answer 2

不应使用非唯一 ID。如果将 id 替换为类，则代码应该可以正常工作。

Answer 3

您应该改用类，元素的id应始终是唯一的

<p><a class="other-activies-link">Semana Omnistack 11</a></p>

<p><a class="other-activies-link">28ª Semana do IME</a></p>

<div id="myModal" class="modal">

 <div class="modal-content">

  <span class="close">&times;</span>

  <iframe id="myFrame" frameborder="0" allowfullscreen></iframe>

 </div>

</div>

这应该有效，

const selectedActivity = document.querySelectorAll(".other-activies-link");

...