Js面试题(三)--js点击弹出对应序号
<!-- 点击ul的五个li元素,分别弹出序号 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
第一种方法,当然也是最容易想到
![](https://img2018.cnblogs.com/blog/1569422/201905/1569422-20190502213758898-2053087809.png)
第二种方法,采用外部参数函数调用
![](https://img2018.cnblogs.com/blog/1569422/201905/1569422-20190502213927732-378081952.png)
第三种方法,采用设置属性,点击事件,然后对应方法
![](https://img2018.cnblogs.com/blog/1569422/201905/1569422-20190502213948984-1147017130.png)
第四种方法,分别让每个li对象设置index关联到onclick
![](https://img2018.cnblogs.com/blog/1569422/201905/1569422-20190502214038251-1096818938.png)
代码如下:
<script> var oLis = document.getElementsByTagName('li'); console.info(oLis); // for (var i = 0; i < oLis.length; i++) { // oLis[i].onclick = (function(j) { // return function() { // alert(j + 1); // } // })(i); // } //立即执行函数 for (var i = 0; i < oLis.length; i++) { (function(j) { oLis[i].onclick = function() { alert(j); } })(i + 1); } </script> <script> var oLis = document.getElementsByTagName('li'); console.info(oLis); function func(obj, i) { obj.onclick = function() { alert(i + 1); } } for (var i = 0; i < oLis.length; i++) { func(oLis[i], i) } </script> <script> var oLis = document.getElementsByTagName('li'); console.info(oLis); function func(obj, i) { obj.onclick = function() { alert(i + 1); } } for (var i = 0; i < oLis.length; i++) { func(oLis[i], i) } </script> <script> var oLis = document.getElementsByTagName('li'); console.info(oLis); //设置index保存 for (var i = 0; i < oLis.length; i++) { oLis[i].index = i; oLis[i].onclick = function() { alert(this.index + 1); } } //还可以用事件代理 </script>
就分享到这些,下次继续···
分享一下我的微信公众号,分享摄影与编程,谢谢大家的关注