多个 document.getElementById答案

【问题标题】：Multiple document.getElementById多个 document.getElementById
【发布时间】：2017-12-10 19:21:12
【问题描述】：

我有一个在模态中使用的图像缩放器。 zoomer 插件使用document.getElementById 打开图像，但我需要它来打开多个图像。

我读过很多你说我需要使用其他选择器的帖子，例如

(document.querySelectorAll("#galley1, #galley2, #galley3));

或类选择器

(document.getElementsByClassName("galley"));

我已经尝试了这些，但仍然无法打开具有多个 ID 的图像缩放器。

我在 div 和选择器上使用的 ID 是#galley1、#galley2、#galley3。

您可以在我的网站http://www.fitzgeraldoilworks.com 上查看整个代码。页面上的第一张图片完美无缺，但其余图片无法放大模式。

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Photo Zoom</title>


<link rel="stylesheet" type="text/css" href="css/lity.css"/>
<link rel="stylesheet" type="text/css" href="css/viewer.css"/>

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/lity.min.js"></script>
<script type="text/javascript" src="js/viewer.js"></script>

</head>


<body>

<div class="featured-body-wrap">
  <div class ="featured-image-container"> 


       <div class ="featured-image-holder">
           <div class="featured-title">KINGS CHOICE</div>

        <div class ="featured-image-wrap">
            <a href="#kings" data-lity> <img src="images/art/thmb/kings choice320.jpg" 
            class="featured-image" style="width:100%;height:auto;border:0;"/></a>
        </div>
       </div>

<div id="kings" class="lity-hide">
<div id="galley1">

          <div class="modal-img-container">

                           <div class="modal-header">Kings Choice</div>

              <div class="sized-box">
                 <div class="model-img-wrap"><img class="model-img" 
                 data-original="images/art/hires/kings choice1500.jpg" src="images/art/med/kings choice700.jpg" alt="SCROLL MOUSE TO ZOOM"/></div>
              </div>
              <div class="sized-box">
                 <div class="model-img-wrap"><img class="model-img" 
                 data-original="images/art/hires/kings choice wall1500.jpg" src="images/art/med/kings choice wall700.jpg" alt="SCROLL MOUSE TO ZOOM"/></div>
              </div>
              <div class="sized-box">
                 <div class="model-img-wrap"><img class="model-img" 
                 data-original="images/art/hires/kings choice head1400.jpg" src="images/art/med/kings choice head700.jpg" alt="SCROLL MOUSE TO ZOOM"/></div>
              </div>

          </div>
</div>
</div>


       <div class ="featured-image-holder">
           <div class="featured-title">WISPER</div>

        <div class ="featured-image-wrap">
            <a href="#wisper" data-lity> <img src="images/art/thmb/wisper thmb320.jpg" 
            class="featured-image" style="width:100%;height:auto;border:0;"/></a>
        </div>
       </div>

<div id="wisper" class="lity-hide">
<div id="galley2">

          <div class="modal-img-container">

                           <div class="modal-header">WISPER</div>

              <div class="sized-box">
                 <div class="model-img-wrap"><img class="model-img" 
                 data-original="images/art/hires/wisper hires.jpg" src="images/art/med/wisper md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div>
              </div>
              <div class="sized-box">
                 <div class="model-img-wrap"><img class="model-img" 
                 data-original="images/art/hires/wisper face hires.jpg" src="images/art/med/wisper face md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div>
              </div>
              <div class="sized-box">
                 <div class="model-img-wrap"><img class="model-img" 
                 data-original="images/art/hires/wisper wall hires.jpg" src="images/art/med/wisper wall md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div>
              </div>

          </div>
</div>
</div>

        <div class ="featured-image-wrap">
            <a href="#shadow" data-lity> <img src="images/art/thmb/shadow thmb.jpg" 
            class="featured-image" style="width:100%;height:auto;border:0;"/></a>
        </div>
       </div>

<div id="shadow" class="lity-hide">
<div id="galley3">

          <div class="modal-img-container">

                           <div class="modal-header">SHADOW</div>

              <div class="sized-box">
                 <div class="model-img-wrap"><img class="model-img" 
                 data-original="images/art/hires/shadow-hires.jpg" src="images/art/med/shadow-md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div>
              </div>
              <div class="sized-box">
                 <div class="model-img-wrap"><img class="model-img" 
                 data-original="images/art/hires/shadow-easle-hires.jpg" src="images/art/med/shadow-easle-md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div>
              </div>
              <div class="sized-box">
                 <div class="model-img-wrap"><img class="model-img" 
                 data-original="images/art/hires/shadow-wall-hires.jpg" src="images/art/med/shadow-wall-md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div>
              </div>

          </div>
</div>
</div>
</div>




      <script type="text/javascript">

    window.addEventListener('DOMContentLoaded', function () {
      var galley = (document.querySelectorAll("#galley1, #galley2, #galley3"));
      var viewer = new Viewer(galley, {
        url: 'data-original',
        button: true,
        navbar: false,
        title: true,
        toolbar: false,
        tooltip: true,
        movable: true,
        zoomable: true,
        scalable: true,
        transition: true,
        zoomRatio: 0.3,
        minZoomRatio: 0.01,
        maxZoomRatio: 100,
        zIndex: 2015,
        inline: false,
        minWidth: 200,
        minHeight: 100,
        viewed: function () {
var context = this;
$('.viewer-canvas').click(function(e){
if(e.target.className == 'viewer-canvas') {
context.viewer.hide();
}
});
}
      });
    });

          </script>

</body>
</html>

【问题讨论】：

标签： javascript jquery html css-selectors

【解决方案1】：

将所有图片放在 1 个类别下，例如“图片”。然后做

var myImages = document.getElementsByClassName("images");

您将获得一个包含所有图像的数组。如果你想用 id 来做这个，那么给你的图像 id 像 "img1","img2","img3" 然后做

var myImages = [];
for(var i = 0; i < numImages; i++) {
    myImages.push(document.getElementById("img"+i));
}

他的结果应该是一样的。

【讨论】：

我的图片已经有一个“model-img”类。我将脚本更改为 var myImages = document.getElementsByClassName("model-img");但还是不行。
我认为你的插件只需要一张图片来缩放。所以你可以从你的数组中传递一个元素。例如 myImages[0] （这应该是第一个元素）。
是的，我认为你是正确的，但我不知道如何实现这一点，需要一个例子来理解如何做到这一点，，，，但我非常感谢你的帮助，谢谢你.. .!

【解决方案2】：

您的图像查看器脚本可能无法处理传入其中的多个元素。您必须为每个元素分别初始化它：

var $elements = document.querySelectorAll('...');

for (var i = 0; i < $elements.length; i++) {
    var viewer = new Viewer($elements[i], {...});
}

【讨论】：

我想试试这个，但不确定如何将它添加到我的脚本中。我希望我有一个例子。
我也认为你是对的。我正在使用一个名为 viewerJS 的插件，并且在文档页面上他们指出该查看器可以在模式中使用并提供代码......我只是不知道如何将它实现到我的脚本中。抱歉，我不太擅长 javascript。这是那里文档页面上的代码。这和你的很相似。变量查看器； image.addEventListener('viewed', function () { console.log(this.viewer === viewer); // -> true }, false);查看器 = 新查看器（图像）；
@MichaelFitzgerald：我不确定你的意思，我只是添加了省略号来代替太长而无法输入的部分。如果您将它们替换为代码中包含的实际值，它应该可以工作。
对不起。我并不是要混淆。只是我缺乏如何将这部分代码实现到我的javascript中的知识。但我确实认为这是正确的方向。
您是否可以将我页面末尾的javascript 并将此代码作为示例实现到其中，以便我可以看到它是如何完成的。我想我会知道按照您的指示将哪些代码放入省略号中。