js for循环渲染数组绑定点击事件获取对应点击对象的值

浅浅的花香味﹌ 2021-10-01 05:20 731阅读 0赞

<!DOCTYPE >
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>标题</title>
    		<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
    	</head>
    
    	<body>
    		<div id="aFor">
    		</div>
    		<script>
    			//循环渲染数组
    			aFor()
    			function aFor() {
    				var list = [{
    					a: '123',
    					b: 'abc'
    				}, {
    					a: '456',
    					b: 'efg'
    				}, {
    					a: '789',
    					b: 'hnk'
    				}]
    				var text = "";
    				var i;
    				for(i = 0; i < list.length; i++) {
    					text += "<button class='btn'>" + list[i].a + "</button>" + ' ';
    					text += "<span>" + list[i].b + "</span>" + "</br>";
    				}
    				document.getElementById("aFor").innerHTML = text;
    				btn(list)
    			};
    
    			//循环绑定点击事件
    			function btn(list) {
    				var list = list;
    				var btnArray = document.getElementsByClassName('btn');
    				for(var i = 0; i < btnArray.length; i++) {
    					btnArray[i].onclick = (function close(j) {
    						return function() {
    							console.log(list[j])
    							alert(list[j].a);
    						}
    					})(i);
    				}
    			}
    		</script>
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，731人围观）

还没有评论，来说两句吧...

相关阅读

相关 js点击事件(Js点击事件冲突怎么办)

JS点击onclick事件这个是闭包的问题 for (var i = 12; i <= 16; i++) \{ (function(i)\{ 第12个点击事

末蓝、/ 2023年09月26日 14:47/ 0 赞/ 170 阅读

相关 vue绑定点击事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>docume

今天药忘吃喽~/ 2022年07月13日 09:00/ 0 赞/ 279 阅读

相关 jq动态绑定点击事件

jq动态添加的元素需要添加点击事件可用delegate on添加 1.delegate <div id="box"> </div>

「爱情、让人受尽委屈。」/ 2022年05月20日 06:16/ 0 赞/ 223 阅读

相关小程序绑定点击事件

1.页面添加 bindtap=”purchaseOn” <view class='quick-view-content' bindtap="purchaseOn"

梦里梦外;/ 2022年05月19日 04:36/ 0 赞/ 282 阅读

相关 jquery 创建元素后，绑定点击事件

> 问题 > > 绑定事件发生在 `dom元素加载之前`，出现错误在 `全局加载`完毕后，再来绑定相应的点击事件，会导致失效。 $(document).r

缺乏、安全感/ 2022年05月10日 01:03/ 0 赞/ 307 阅读

相关 JS 多图片绑定点击事件

JS 多张图片存在一个页面时，公用一个class，实现显示出不同图片效果本篇文章主要记录一下做项目时，对循环出来的图片进行点击遇到的难题。看一下HTML

缺乏、安全感/ 2022年01月26日 00:13/ 0 赞/ 758 阅读

相关 js循环添加标签并利用其id绑定点击事件

function removeAdImage(id){ console.log(id) console.log(document.get

柔光的暖阳◎/ 2021年11月16日 19:50/ 0 赞/ 679 阅读

相关 js 删除对应数组所点击下标的对象,修改对应数组所点击下标的对象中对应变量的值

<!DOCTYPE > <html> <head> <meta charset="UTF-8"> <title>标题

你的名字/ 2021年10月01日 05:22/ 0 赞/ 298 阅读

相关 js for循环渲染数组绑定点击事件获取对应点击对象的值

<!DOCTYPE > <html> <head> <meta charset="UTF-8">

浅浅的花香味﹌/ 2021年10月01日 05:20/ 0 赞/ 732 阅读

相关 div添加一个点击事件（绑定点击事件）

1、HTML onclick 事件属性 <input type="button" value="点我点我" onclick="ds()"> <script>

喜欢ヅ旅行/ 2021年09月24日 14:40/ 0 赞/ 678 阅读