はjavascriptの

Question

上で複数のモーダルの画像を開くことができませんHERE FIDDLEを作成しました：https://jsfiddle.net/jqqn2gg7/

を、私は私の問題について上記のフィドルを掲載。 「バニー1」に行くと、ウサギの上に乗ることができ、最初のものを開くことができますが、2番目のものはさらに動きません。私はすべてを試みました、最初のバニーが働いていなくても。あなたは働くことに戻りました。

ここには何が欠けていますか？

「エスケープ」ボタンを使用して、「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

そのあなたはgetElementByIdをを使用して画像を1つだけ選び出していて、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

Answer 2

あなたが代わりにgetElementByIdのgetElementsByClassNameを使用することができます。

チェックこのフィドル：fiddle