今天面试遇到了一个问题如下:
以下代码如何实现点击列表显示相应的index值?
<ul id="test">
<p>1</p>
<p>2</p>
<p>3</p>
</ul>
答案可以是这样的
let test=$('#test');
$('#test li').on('click',function(e){
alert( $(this).index());
})
但是这个怎么样去使用事件代理呢?
$('#test').on('click','li',function(e){
e.stopPropagation();
let target=e.target;
//console.log($(target).prop('outerHTML'))
// if(!target.nodeType===3){
alert( $(target).index());
// }
})
像这样的的话没办法判断li中的文字节点,如果点击文字节点index会等于0,想要实现点击文字节点也是li标签的话具体是如何做呢?
$('#test').on('click', 'li', function(e) {
alert($(this).index())
})
老哥,你这厉害了啊
我写的是原生的JS,ul里面任何标签,标签里任何文字都可以点击出来
<body>
<ul id="test">
<p>文字也可以</p>
<p>任何标签都可以吧</p>
<div>3</div>
</ul>
<script type="text/javascript">
var test = document.getElementById("test");
var num = test.childElementCount;
for (var i = 0; i < num; i++) {
test.children[i].onclick = function() {
console.log(this.innerText);
}
}
</script>
</body>