如何找到可点击元素的索引?单击按钮时我需要获得li
的索引,所以我可以从数组中删除它。
var template = document.querySelector('#template');
this.element.addEventListener('click', function(e) {
if(e.target && e.target.nodeName == 'BUTTON' && e.target.className == 'remove') {
//var index = ??
//this.deleteTask(index);
}
}.bind(this));
<script id="template" type="x-tmpl-mustache">
<ul>
{{ #tasks }}
<li>{{ . }} - <button class="remove">X</button></li>
{{ /tasks }}
</ul>
</script>
答案 0 :(得分:1)
如果您使用@index
,可以使用数据属性将其附加到按钮本身,然后使用:
var template = document.querySelector('#template');
this.element.addEventListener('click', function(e) {
if(e.target && e.target.nodeName == 'BUTTON' && e.target.className == 'remove') {
var index = e.target.dataset.index;
// or possibly e.target.getAttribute('data-index');
this.deleteTask(parseInt(index, 10));
}
}.bind(this));
<script id="template" type="x-tmpl-mustache">
<ul>
{{ #tasks }}
<li>{{ . }} - <button class="remove" data-index="{{ @index }}">X</button></li>
{{ /tasks }}
</ul>
</script>