Question

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

如果有人点击了包含class属性的链接，我想使用fancybox。我也用id做了。使用id属性，代码工作得很好。但如果我用类属性来装它它就不起作用...... :(

<!-- 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，正如它所说，重新生成多个元素，一个列表。所以myBtnNew是一个元素列表，列表没有onclick。所以只需像使用span一样添加[0]：

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

Answer 2

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

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

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

用class而不是id显示fancybox

2 个答案: