Question

var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

<img id="myImg" src="imageone.jpg" alt="Image one" >

<br>
<br>
<img id="myImg" src="imagetwo.jpg" alt="Image two" >

所以上面的片段用于模态图像css3教程。我知道我不能有多个具有相同ID的标签，这就是为什么代码在线使用一个图像。经过研究，我知道我必须使用JS的动态ID。

var img = document.getElementById('myImg');

以前的JS系列是我需要改变的。

如何动态更改getElementById？这样我可以使用differentr src图像多一个？

研究表明使用标签选择器或类选择器是不合适的。

任何有助于我学习的帮助文件也会很棒。

所以我用css和东西做了一些不错的进展，它看起来很棒。现在我的下一步是使用现有的alts在模态出现时包含文本。以下是我已经存在的现有js行

var captionText = document.getElementById（“caption”）;

现在下面是我将在调用alt时使用的html，以便每个图像都有自己的alt文本出现在模态弹出窗口

我已经尝试过了，似乎没有用，可能是我在CSS中的格式化吗？

Answer 1

如果需要处理相同的元素集合，最好使用class属性来定位它们。

不是使用document.getElementById定位一个元素，而是使用NodeList或document.getElementsByClassName获得document.querySelectorAll元素集合。

然后，您需要遍历这些元素并使用您已经编写的代码。

以下是一个例子：

var imgs = document.getElementsByClassName('myImg');

for (var i = 0; i < imgs.length; i += 1) {
  var img = imgs[i];

  img.onclick = function() {
    // your on click stuff
  };
};

不要忘记将HTML更改为：<img class="myImg" src="imageone.jpg" alt="Image one" >

Answer 2

希望这对你有所帮助

＆＃13;

var imgs = document.querySelectorAll('.gallery-img');

if (imgs) {

  for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('click', showModal, false);
  }

}

function showModal() {
  var modal = document.querySelector('.modal');
  if (modal) {
    var img = modal.querySelector('img');
    var close = modal.querySelector('.close');
    modal.classList.add('open');
    img.src = this.src;

    if (close) {
      close.addEventListener('click', closeModal, false);
    }
  }
}

function closeModal() {
  this.parentNode.classList.remove('open');
}

＆＃13;

img {
  width: 200px;
  cursor: pointer;
  border: 2px solid transparent;
}
img:hover {
  border: 2px solid #191919;
}
.modal {
  display: none;
  width: auto;
  height: auto;
  background: #ccc;
  border-radius: 4px;
  padding: 6px;
}
.modal.open {
  display: inline-block;
}
.modal .close {
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  display: block;
  text-align: right;
}

＆＃13;

<img class='gallery-img' src="http://wallpaperbeta.com/wallpaper/small_fish_by_name_beta_minimalism_hd-wallpaper-296364.jpg" alt="">

<img class='gallery-img' src="https://wallpaperscraft.com/image/flowers_small_flower_surface_rose_43393_2048x1152.jpg" alt="">

<div class="modal">
  <span class="close">&times;</span>
  <img src="" alt="">
</div>

＆＃13;

document.getElementByI - 动态使用多次使用相同的ID

2 个答案: