Javascript Jquery选择器/按类/id获取元素

我有这个JS代码，我想应用到几个图像中，我知道我不能使用getElementById，我看到很多建议使用ClassByName或Selector查询，但是我如何在实践中应用它呢？我已经看到了代码，但我不知道在我自己的代码中会出现什么

编辑：为了清晰起见，这里有一个例子。我想在我的第二张图片上也使用相同的模式代码。我现在已经尝试了你所有的建议，但我无法让它们发挥作用

HTML:

JS:

---

您不应该在多个元素中使用相同的id。 使用类来选择元素

<a id="my-link1" class="mylink" href="largeimage1.jpg"><img src="thumbnail2.jpg"></a>                        
<a id="my-link2" class="mylink" href="largeimage.jpg"><img src="thumbnail.jpg"></a>

---

并添加一个循环来附加每个事件。

您已经提到了jQuery，但您是用传统的方式进行的。jQuery是一个JavaScript库，用于减少DOM操作，这意味着不用编写document.getElementByIdmy-link，只需使用$my-link即可。使用jQuery，您可以使用CSS选择器选择和操作DOM元素，就像使用句点一样。引用类或使用哈希引用元素的ID

jQueryfunction${ $a.modal-trigger.onclick，函数e{ e、 防止违约； //获取其中单击的图像 var img=$this.findimg.eq0； var modal=$myModal；//获取模态 //modal内部的图像谁的'src'将被替换。 var modalImg=$ImgEnlarge modal.cssdisplay，block；//设置显示：modal上的block //将图像的“alt”属性中的文本设置为标题。 $caption.textimg.attralt； //单击带有class.close的元素时隐藏模态。 $.close.onclick，函数e{ e、 防止违约； modal.css显示，无； }; }; }

---

考虑以下几点

$function{ 函数openImge{ e、 防止违约； var link=$e.target.isa？$e.target:$e.target.closesta； var modal=$modal2； var modalImg=$ .莫代尔{ 宽度：100%； 身高：100%； z指数：1000； 背景色：rgba0,0,0,0.65； 位置：绝对位置； 排名：0； 左：0； 文本对齐：居中； } .模态模态模态{ 宽度：75%； } .莫代尔，结束{ 颜色：白色； 边框：2个实心222； 边界半径：3px； 位置：绝对位置； 左：90%； 顶部：3px； 填充：.4em； 背景色：666； } X

---

HTML中的ID每页都应该是唯一的。因此，使用testtest2是无效的，因此您的JS可能不会按照您期望的方式运行。但是，类是可重用的。因此testtest2是有效的，可以使用getElementsByClassName“my-link”进行选择。我尝试过将geElementsById更改为getElementsByClassName，但实际上它不起作用re必须是javascript代码中的其他内容，必须对其进行更改才能正确执行此操作如何添加循环？我只是一只鹦鹉，重复我在网上读到的内容，但感谢您的解释：对不起，我是在移动设备上键入的，所以请忽略任何键入错误。记住，在使用jQuery时，您只需要编写$.my元素而不是document.getElementByClassNamemy元素和$myElement，而不是使用document.getElementByIdmyElement。

    // Get the modal
    var modal = document.getElementById('myModal2');
    
    // Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = document.getElementById('ImgEnlarge');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption2");
    var link = document.getElementById("my-link");

link.addEventListener('click', function (event) {
  event.preventDefault()

  modal.style.display = 'block'
  modalImg.src = link.href
})
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { 
        modal.style.display = "none";
        }

<a id="my-link1" class="mylink" href="largeimage1.jpg"><img src="thumbnail2.jpg"></a>                        
<a id="my-link2" class="mylink" href="largeimage.jpg"><img src="thumbnail.jpg"></a>

var links = document.getElementsByClassName("mylink");