Js面試題（三）--js點擊彈出對應序號
阿新 • • 發佈：2019-05-03
外部 函數 攝影 技術 rip 序號 ack 關聯 col <!-- 點擊ul的五個li元素，分別彈出序號 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
第一種方法，當然也是最容易想到
第二種方法，采用外部參數函數調用
第三種方法，采用設置屬性，點擊事件，然後對應方法
第四種方法，分別讓每個li對象設置index關聯到onclick
代碼如下：
第二種方法，采用外部參數函數調用
第三種方法，采用設置屬性，點擊事件，然後對應方法
第四種方法，分別讓每個li對象設置index關聯到onclick
代碼如下：
<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>
就分享到這些，下次繼續···
分享一下我的微信公眾號，分享攝影與編程，謝謝大家的關註
Js面試題（三）--js點擊彈出對應序號