Javascript Onclick div类

Question

所以我有一个div类的按钮，我们称其为“ login-button-arrow”。 我想设置一个javascript方法，因此当单击该div时，会弹出一个小javascript框。

我该怎么做呢？ 我已经尝试过这样的事情：

login-button-arrow.onclick{alert('xyz')}

但我想那不是那样的。

Answer 1

jsBin演示

// Cache your elements:
var $lba= document.getElementsByClassName('login-button-arrow');

// You nice function:
function myPopup() {
    alert( "xyz" );
}

// Assign a click event handler to every element:
for(var i=0; i<$lba.length; i++) {
    $lba[i].onclick = myPopup;
}

如果您需要支持IE6，也请参见： http : //caniuse.com/getelementsbyclassname以及最终https://gist.github.com/eikes/2299607 ：）

以上版本的JS版本会比较新（缺少IE8支持）：

var $lba= document.querySelectorAll('.login-button-arrow');

function myPopup() {
    alert( "xyz" );
}

for(var i=0; i<$lba.length; i++) {
    $lba[i].addEventListener("click", myPopup, false);
}

ES6看起来像： jsBin演示

function myPopup() {
  alert( "xyz" );
}

const buttons = document.querySelectorAll('.login-button-arrow');
[...buttons].map( btn => btn.addEventListener("click", myPopup));

Answer 2

$('.login-button-arrow').on('click', function() { alert('xyz'); });

Answer 3

var login-button-arrows = document.getElementsByClassName('login-button-arrow');

login-button-arrows.forEach(function(obj){
    obj.addEventListener('click', function(){
        alert('xyz');
    });
});

Answer 4

使用Jquery：

$（'＃login-button-arrow'）。on（'click'，function（）{alert（'xyz'）;}）;