javascript - JS如何实现：点击class相同的一组选项中的任意一个，弹出它的值。

Question

<ul class="list-group">
    <li class="list-group-item yourcards">111111</li>
    <li class="list-group-item yourcards">1222222</li>
    <li class="list-group-item yourcards">333333</li>
    <li class="list-group-item yourcards">4444</li>
</ul>

就是这样简单的一个ul，我想用JS实现点击任何一个li都可以弹出该li的内容，如何做呢？

Answer 1

    var aLi = document.querySelectorAll('.list-group-item');
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].addEventListener('click', function(){
            alert(this.innerHTML);
        });
    }

Answer 2

$('.list-group').on('click','li',function(){
    alert($(this).text());
});

Answer 3

原生 JS 代码如下。用事件委托吧。这样效率会高一些。另外，选择 ul 这个元素的话，用原生 JS 最好是用选 ID 的方式去做。欢迎拍砖。

javascriptvar ul = document.querySelector('.list-group'),// document.querySelectorAll('.list-group')[0],
    handler = function(event){
        var e = event || window.event,
            target = e.target || e.srcElement;
        console.log(target.innerHTML);

    };

if (window.addEventListener){
    ul.addEventListener("click",handler,false);
}
else if (window.attachEvent){
    ul.attachEvent("onclick",handler);
}

Answer 4

//选取所有同一类名的元素
var items = document.getElementsByClassName('list-group-item');
//遍历数组并一一绑定事件
for (var i = 0; i < items.length; i++) {
    items[i].addEventListener('click', function(){
        console.log(this.innerHTML);
    });
}