Question

在此处设置了一个标签： https://jsfiddle.net/jqqn2gg7/

我在上面发表了关于我的问题的小提琴。如果你去“兔子1”，你可以在兔子上盘旋，你会看到你可以打开第一个，但第二个甚至不会让步。我尝试了一切，即使第一个兔子停止工作。回去工作了。

这里缺少什么？

我还尝试使用“Escape”按钮关闭而不是仅使用“X”按钮。

我会在这里发布我的问题代码：

<div class="content-lg container">
  <div class="toolbar mb2 mt2">
    <button class="btn fil-cat" href="" data-rel="all"><i class="fa fa-star-o" aria-hidden="true"></i> All</button>
    <button class="btn fil-cat" data-rel="bunny1">bunny1</button>
    <button class="btn fil-cat" data-rel="bunny2">bunny2</button>
    <button class="btn fil-cat" data-rel="bunny3">bunny3</button>
    <button class="btn fil-cat" data-rel="bunny4">bunny4</button>
    <button class="btn fil-cat" data-rel="bunny5">bunny5</button>
  </div>

  <div id="portfolio">
    <div class="tile scale-anm bunny1 all">
      <img id="myImg" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="Toldos Algarve" width="300" height="200">
    </div>
    <div class="tile scale-anm bunny1 all">
      <img id="myImg" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny1 all">
      <img id="myImg" src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny2 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Cute-Red-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny2 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny2 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="http://www.petakids.com/wp-content/uploads/2015/11/Baby-Bunny.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny3 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny4 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny4 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <div class="tile scale-anm bunny4 all">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/0a/8b/91/0a8b91f0bfbbcbc65fb7d43cd9ff4c78--grey-bunny-cutest-bunnies.jpg" alt="" />
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">

      <!-- The Close Button -->
      <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

      <!-- Modal Content (The Image) -->
      <img class="modal-content" id="img01">

      <!-- Modal Caption (Image Text) -->
      <div id="caption"></div>
    </div>
    <div id="myModal" class="modal">

      <!-- The Close Button -->
      <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

      <!-- Modal Content (The Image) -->
      <img class="modal-content" id="img02">

      <!-- Modal Caption (Image Text) -->
      <div id="caption"></div>
    </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

和javascript：

$(function() {
  var selectedClass = "";
  $(".fil-cat").click(function() {
    selectedClass = $(this).attr("data-rel");
    $("#portfolio").fadeTo(100, 0.1);
    $("#portfolio div").not("." + selectedClass).fadeOut().removeClass('scale-anm');
    setTimeout(function() {
      $("." + selectedClass).fadeIn().addClass('scale-anm');
      $("#portfolio").fadeTo(300, 1);
    }, 300);

  });
});

// DAT GALLERY

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var modalImg2 = document.getElementById("img02");
var captionText = document.getElementById("caption");
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;
  modalImg2.src = this.src;
  captionText.innerHTML = this.alt;
}

// 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";
}

// end of gallery

Answer 1

您可以使用getElementsByClassName代替getElementById。

检查这个小提琴：fiddle

Answer 2

因为你只使用getElementByID挑出其中一个图像，而ID只适用于一个。您不能拥有多个ID相同的ID。

另外......既然你在顶部使用了jquery，也可以坚持使用它，而不是使用vanilla js。所以，这样做应该是好的。

// Apply click handler to all tile elements,
$('.tile').click(function(){
   // Get image inside tile element
  var img = $(this).find('img');
  // Update modal with image data
  $("#img01").attr('src', img.attr('src'));
  $("#img02").attr('src', img.attr('src'));
  $('#caption').html(img.attr('alt'));
  $('#myModal').css('display','block');
});

// Close modal
$('.close').click(function(){
  $('#myModal').css('display','none');
})

这种方式更加一致和简洁。

还提供.tile类，光标指针，以便您可以单击它。

 .tile { cursor:pointer; }

SEE FIDDLE

无法在javascript上打开多个模态图像

2 个答案: