分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

Js面试题(三)--js点击弹出对应序号

发布时间:2023-11-01 15:52责任编辑:熊小新关键词:js面试题
<!-- 点击ul的五个li元素,分别弹出序号 -->
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
第一种方法,当然也是最容易想到
第二种方法,采用外部参数函数调用
第三种方法,采用设置属性,点击事件,然后对应方法
第四种方法,分别让每个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点击弹出对应序号

原文地址:https://www.cnblogs.com/huihappy/p/10803532.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved