首页 > JS如何实现:点击class相同的一组选项中的任意一个,弹出它的值。

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

<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的内容,如何做呢?


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

原生 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);
}

$('.list-group').on('click','li',function(){
    alert($(this).text());
});
【热门文章】
【热门文章】