Javascript Onclick div类

Question

所以我有一个div类的按钮，我们可以调用它＆＃34; login-button-arrow＆＃34;。 我想设置一个javascript方法，所以当点击这个div时，会弹出一个小的javascript框。

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

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

但我猜它不会那样。

Answer 1

<强> jsBin demo

// 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;
}

另见： http://caniuse.com/getelementsbyclassname 并最终 https://gist.github.com/eikes/2299607如果您需要支持IE6：）

上面的一个更新的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 demo

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：

  

$（＆＃39;＃login-button-arrow＆＃39;）。on（＆＃39;点击＆＃39;，功能（）{alert（＆＃39; xyz＆＃39;）;}）;