关于JS中无法有效获取for循环中i的值问题/利用for循环监听只对最后一项生效

问题：想在每次获取到i的值并输出，但是实际每次都输出循环中i的最后一个值
问题在于数组中的每项都是一个方法对象，导致函数产生了一个闭包域

//增加相应个数闭包域空间，使用IIFE把每个i的值都传进去
    for(i = 0; i<yuans.length;i++){
        (function(arg){
            yuans[i].onclick = function(){
            index=arg;
            }
        }(i));
    }

想要实现每次点击后面删除按钮删除一项的效果

<body>
<!-- 建表-->
    <table>
        <tr>
            <td>123</td>
            <td>456</td>
            <td>789</td>
            <td>XXX</td>
            <td><input type="button" class="delete" number="1" value="删除"></td>
        </tr>
        <tr>
            <td>XXX</td>
            <td>QQQ</td>
            <td>WWW</td>
            <td>EEE</td>
            <td><input type="button" class="delete" number="2" value="删除"></td>
        </tr>
        <tr>
            <td>TTT</td>
            <td>TTT</td>
            <td>TTT</td>
            <td>TTT</td>
            <td><input type="button" class="delete" number="3" value="删除"></td>
        </tr>
        <tr>
            <td>YYY</td>
            <td>YYY</td>
            <td>YYY</td>
            <td>YYY</td>
            <td><input type="button" class="delete" number="4" value="删除"></td>
        </tr>
        <tr>
            <td>UUU</td>
            <td>UUU</td>
            <td>UUU</td>
            <td>UUU</td>
            <td><input type="button" class="delete" number="5" value="删除"></td>
        </tr>
    </table>

<script>
    var deleteBtns = document.getElementsByClassName("delete");
    for(i =0;i<deleteBtns.length;i++){
		//循环为每个按钮添加事件监听
        deleteBtns[i].addEventListener("click",function(){
            console.log(this.getAttribute("number"));
			//在这里要使用this来调用对象否则调用的永远是最后一个
			//var trParent =  deleteBtns[i].parentNode.parentNode;
            var trParent = this.parentNode.parentNode;
            var deleteFirstKid = trParent.firstElementChild;
            trParent.removeChild(trParent.firstElementChild);
        }) 
    }
</script>
</body>
posted @ 2022-05-18 21:00  夜色哪里都是美  阅读(192)  评论(0)    收藏  举报
​