用class代替id显示fancybox

Question

我在开始学习Javascript。我希望你能帮助我。

我想使用fancybox，如果有人点击一个类属性的链接。我也用id来完成它。使用id属性代码工作得很好。但是，如果我带班cange它的属性它doesn't工作.... :(

<!-- Trigger/Open The Modal --> 
<button id="myBtn">Open Modal</button> 

<!-- The Modal --> 
<div id="myModal" class="modal"> 

    <!-- Modal content --> 
    <div class="modal-content"> 
    <span class="close">&times;</span> 
    <p>Some text in the Modal..</p> 
    </div> 

</div> 

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

// Get the button that opens the modal 
var btn = document.getElementById("myBtn"); 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks the button, open the modal 
btn.onclick = function() { 
    modal.style.display = "block"; 
} 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
</script> 

此代码的工作很细，但为什么鸵鸟政策工作这一项，只有类属性？代码也纷纷在相同的元素上一个，只有代码以下行已被更改。

<button class="myBtnNew">Open Modal New</button> 

var myBtnNew = document.getElementsByClassName("myBtnNew"); 

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

谢谢您的帮助...

Answer 1

getElementsBy，因为它说，resturns多个元素，一个列表。所以myBtnNew是元素列表，列表中没有onclick，因此只需添加[0]就可以了span：

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

Answer 2

document.getElementsByClassName返回一个对象数组，而不仅仅是一个对象。使用这个：

var myBtns = document.getElementsByClassName("myBtnNew"); 

myBtns[0].onclick = function() { 
    modal.style.display = "block"; 
}