JS如何给ul下的所有li绑定点击事件,点击使其弹出下标和内容

这是一个非常常见的面试题,出题方式多样,但考察点相同,下面我们来看看这几种方法:

方法一:

  var itemli = document.getElementsByTagName("li");

   for(var i = 0; i<itemli.length; i++){

    itemli[i].index = i; //给每个li定义一个属性索引值

    itemli[i].onclick = function(){

      alert(this.index+this.innerHTML); 

    }

   }

方法二:

var itemli = document.getElementsByTagName("li");

for(var i = 0; i<itemli.length; i++){

   (function(n){

          itemli[i].onclick = function(){

      alert(n+itemli[n].innerHTML);  

     }

    })(i)

   }

方法三:

var itemli = document.getElementsByTagName("li");

for(var i = 0; i<itemli.length; i++){
        itemli[i].onclick = function(n){
        return function(){
                alert(n+itemli[n].innerHTML);  
            }
      }(i)
    }

方法四:


$("ul li").click(function(){
        var item = $(this).index();  //获取索引下标 也从0开始
        var textword = $(this).text();  //文本内容
        alert(item+textword);
    })

上面这四种方法都可以实现循环绑定,但是我们知道,频繁的操作DOM是非常消耗性能的,如果有1000个li,怎么办呢?我们还有另一种思路,事件代理,又称事件委托。简单的来讲就是利用JS中事件的冒泡属性,把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。下面我们来看看。

方法五(JS事件代理):

 var ul = document.querySelector("ul");
    ulItem.onclick = function (e) {
        e = e || window.event; //这一行及下一行是为兼容IE8及以下版本
        var target = e.target || e.srcElement;
        if (target.tagName.toLowerCase() === "li") {
            var li = this.querySelectorAll("li");
            index = Array.prototype.indexOf.call(li, target);
            alert(target.innerHTML + index);
        }
    }

上述代码中,为什么需要 “index = Array.prototype.indexOf.call(li,target);” 这样使用数组的indexOf方法呢,这是因为querySelectorAll方法获取到的元素列表不是数组,和函数的arguments一样是一种类数组类型,不可以直接使用数组的方法。

方法六(jQuery事件代理):

 $(document).ready(function () {
        $("ul").on("click", function (event) {
            var target = $(event.target);
            alert(target.html() + target.index())
        });
    });

 

  • 6
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现点击一个 li 元素展示其详情,同时隐藏其它 li 元素的详情,可以使用 v-show 指令结合事件处理函数来实现。具体实现步骤如下: 1. 在每个 li 元素上绑定一个点击事件,例如 @click="showDetail(index)",其中 index 表示当前 li 元素的下标。 2. 在 data 中定义一个变量 selected,用于记录当前选中的 li 元素的下标,默认值为 -1。 3. 在 showDetail 方法中,先将选中的 li 元素的下标赋值给 selected,然后遍历所有 li 元素,根据当前元素的下标和 selected 的值来判断该元素是否应该显示,如果当前元素的下标等于 selected,则显示该元素的详情,否则隐藏该元素的详情。 具体代码实现如下: ``` <template> <ul> <li v-for="(item, index) in items" :key="index" @click="showDetail(index)"> {{ item.title }} <div v-show="selected === index">{{ item.detail }}</div> </li> </ul> </template> <script> export default { data() { return { items: [ { title: '标题1', detail: '详情1' }, { title: '标题2', detail: '详情2' }, { title: '标题3', detail: '详情3' } ], selected: -1 } }, methods: { showDetail(index) { this.selected = index; for (let i = 0; i < this.items.length; i++) { if (i === index) { // 当前选中的 li 元素 this.$set(this.items[i], 'showDetail', true); } else { // 其它 li 元素 this.$set(this.items[i], 'showDetail', false); } } } } } </script> ``` 在上面的代码中,我们使用了 $set 方法来动态添加一个 showDetail 属性来记录每个 li 元素的详情是否应该显示。需要注意的是,由于 showDetail 是动态添加的属性,因此需要使用 $set 方法来添加,否则 Vue.js 无法监听到该属性的变化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值