<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 的方式去做。欢迎拍砖。
javascript
var 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());
});