点击某个按钮, 提示"点击的是第n个按钮"

最新推荐文章于 2023-01-15 21:21:51 发布

zmj2051176726

最新推荐文章于 2023-01-15 21:21:51 发布

阅读量363

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/xiaoxingxingzai/article/details/103088889

版权

javaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

需求: 点击某个按钮, 提示"点击的是第n个按钮"

<body>

<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
<script type="text/javascript">
  var btns = document.getElementsByTagName('button')
  //遍历加监听
  /*
  for (var i = 0,length=btns.length; i < length; i++) {
    var btn = btns[i]
    btn.onclick = function () {
      alert('第'+(i+1)+'个')  //永远是第4个
    }
  }*/
  /*正确做法
  for (var i = 0,length=btns.length; i < length; i++) {
    var btn = btns[i]
    //将btn所对应的下标保存在btn上
    btn.index = i
    btn.onclick = function () {
      alert('第'+(this.index+1)+'个')
    }
  }*/

  //利用闭包
  for (var i = 0,length=btns.length; i < length; i++) {
    (function (j) {
      var btn = btns[j]
      btn.onclick = function () {
        alert('第'+(j+1)+'个')
      }
    })(i)  //引用了外部变量i
  }

</script>
</body>