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

你的名字 2021-10-01 05:22 309阅读 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>
    		
    			var list = [{
    				content:'内容1',
    				delete: '删除1',
    				modify: '修改1',
    			}, {
    				content:'内容2',
    				delete: '删除2',
    				modify: '修改2',
    			}, {
    				content:'内容3',
    				delete: '删除3',
    				modify: '修改3',
    			}]
    	        //循环渲染数组
    			aFor(list)
    			function aFor(list) {
    				var list = list
    				var text = "";
    				var i;
    				for(i = 0; i < list.length; i++) {
    										text += "<span>" + list[i].content+ "</span>" ;
    					text += "<button class='btn'>" + list[i].delete + "</button>" + ' ';
    					//					text += "<span>" + list[i].b + "</span>" + "</br>";
    					text += "<button class='btnx'>" + list[i].modify + "</button>" + "</br>";
    				}
    				document.getElementById("aFor").innerHTML = text;
    				btn(list)
    			};
    			//循环绑定点击事件
    			function btn(list) {
    				var list = list;
    				var length = list.length;
    				var deleteArr = document.getElementsByClassName('btn');
    				for(var i = 0; i < deleteArr.length; i++) {
    					deleteArr[i].onclick = (function close(j) {
    						return function() {
    							//删除对应数组所点击下标的对象
    							list.splice(j,1)
    							console.log(list)
    							aFor(list)
    						}
    					})(i);
    				}
    				var modify = document.getElementsByClassName('btnx');
    				for(var i = 0; i < modify.length; i++) {
    					modify[i].onclick = (function close(j) {
    						return function() {
    							//修改对应数组所点击下标的对象中对应变量的值
    							list[j].content = "修改的内容"+j
    							
    							aFor(list)
    						}
    					})(i);
    				}
    			}
    
    
    		</script>
    	</body>
    
    </html>