Question

function Popup() {

}

Popup.prototype.openPopup = function() {
    var div = document.getElementById("test");
    div.style.display = 'block';
        };

Popup.prototype.closePopup = function() {
var div = document.getElementById("test");
div.style.display = 'none';
};


window.onload = function() {
    var popup = new Popup();

    var opnpopup = document.getElementsByClassName('clck');
    opnpopup.addEventListener('click', function() {
        popup.openPopup();
    });

    var cnclpopup = document.getElementById('cancel');
    cnclpopup.addEventListener('click', function() {
        popup.closePopup();
    });


}

HTML code：

<button id="clck" class="clck">click here</button>
<div id="test" class="popup">
    This is a test message
    <div id="cancel" class="cancel" ></div>
</div>

在上面的js中，当我使用'clck'访问类名document.getElementsByClassName('clck')时，弹出窗口没有显示，但是当我们通过'id'访问它时，它就可以工作了......那么问题请解释< / p>

Answer 1

getElementsByClassName返回类似数组的对象。请在此处查看：getElementsByClassName

“返回具有全部子元素的所有子元素的类数组对象给定的类名。“

opnpopup是一个包含类clck的所有元素的数组。您无法绑定数组上的事件。

window.onload = function() {
    var popup = new Popup();

    var opnpopup = document.getElementsByClassName('clck');

    for ( index = 0; index < opnpopup.length; index++ )
       opnpopup[ index ].addEventListener('click', function() {
         popup.openPopup();
      });

    var cnclpopup = document.getElementById('cancel');
    cnclpopup.addEventListener('click', function() {
        popup.closePopup();
    });
}

此代码应该有效，因此您将click事件绑定到此数组中的所有元素。

使用Prototype JS访问类属性

1 个答案: