使用多個Id標籤激活一個關閉跨度元素

在下面的代碼中，我在頁面上有多個模態圖像元素。對於這些元素中的每一個，我都使用「X」閉合跨度元素。使用多個Id標籤激活一個關閉跨度元素

第一模：

<div id="myModal" class="modal"> 
<span class="close">×</span> 
<div id="carousel-example-generic" class="carousel slide" > @*data-ride="carousel"*@ 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
      <img class="img-responsive center-block" src="foo" alt="Navigation"> 
      <div class="carousel-caption"> 
      Caption Here 
      </div> 
     </div> 
     <div class="item"> 
      <img class="img-responsive center-block" src="foo" alt=""> 
      <div class="carousel-caption"> 
       Caption Here 
      </div> 
     </div> 
     <div class="item"> 
      <img class="img-responsive center-block" src="foo" alt=""> 
      <div class="carousel-caption"> 
       Caption Here 
      </div> 
     </div> 
    </div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
</div>

第二模式：

<div id="myModal2" class="modal"> 
<span class="close">×</span> 
<img class="modal-content" id="img02" src="~/Images/Site/banner.jpg" alt="Completion Certifiate for Compliance Training"> 
<div id="caption"></div>

的Javascript：

var modal = document.getElementById('myModal'); 

var img = document.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 


img.onclick = function() { 
    modal.style.display = "block"; 

} 

var span = document.getElementsByClassName("close")[0]; 

span.onclick = function() { 
modal.style.display = "none"; 
} 



var modal2 = document.getElementById('myModal2'); 

var img2 = document.getElementById('myImg2'); 
var modalImg2 = document.getElementById("img02"); 


img2.onclick = function() { 
    modal2.style.display = "block"; 

} 
var span = document.getElementsByClassName("close")[0]; 

span.onclick = function() { 

    modal2.style.display = "none"; 
}

我遇到的問題是，當我嘗試分配隱含關閉功能時，第一個會工作，但第二個不會。我需要在它們各自的Modals上充當關閉元素。任何幫助非常感謝

來源

2016-12-08 Joshua

你能顯示你的HTML？ –

你正在使用'（「close」）[0]'來獲得你的跨度的參考，這將是完全相同的元素 –

@PatrickEvans我如何修改這個以改變類的性質？ – Joshua

var spans = document.getElementsByClassName("close"); 

for (var i = 0; i < spans.length; i++) { 
    spans[i].addEventListener('click', function(event) { 
    event.preventDefault(); 
    console.log("clicked", this); 
    //hide your modal here... 
    }); 
}

來源

2016-12-08 17:39:59

使用多個Id標籤激活一個關閉跨度元素

回答

相關問題