在引用外部作用域变量的循环中声明的函数可能会导致混淆

Question

这是一个jshint警告问题。我该如何解决这个问题?

var comment_btn=document.querySelector('.comment_button');
var comment_ul=document.querySelector('.comment_ul');
var comment_text=document.querySelector('#comment');
comment_btn.onclick = function(){
var comment_li = document.createElement('li');
comment_li.className = 'comment_li';
if(comment_text.value != '') {
comment_li.innerHTML = comment_text.value + "<a class='comment_a' href='javascript:;'>Delete</a>";
comment_ul.insertBefore(comment_li,comment_ul.children[0]);
var del = document.querySelectorAll('.comment_a');
for (var i = 0; i < del.length; i++) {
del[i].onclick = function() {
comment_ul.removeChild(this.parentNode);
};
}
}
else {
alert('Please input!');
}
};

警告:
在引用外部作用域变量的循环中声明的函数可能会导致语义混淆。(comment_ul) (W083) jshint (W083)

我实在想不出一个解决办法，请帮帮我。

Answer 1

每次添加新的li时，您都在选择每个删除锚并为其添加另一个单击事件。

你根本不应该循环。你应该在你创建的li中选择锚点，并将事件附加到它上面。

const comment_ul = document.querySelector("ul");
const comment_text = document.querySelector("#comment_text");

comment_btn.addEventListener('click', function() {
if (!comment_text.value.length) {
alert('Please input!');
return;
}
var comment_li = document.createElement('li');
comment_li.className = 'comment_li';
comment_li.innerHTML = comment_text.value + "<a class='comment_a' href='javascript:;'>Delete</a>";
comment_ul.insertBefore(comment_li, comment_ul.children[0]);
var del = comment_li.querySelector('.comment_a');
del.addEventListener('click', function(evt) {
evt.preventDefault();
comment_ul.removeChild(this.parentNode);
});
});

<ul></ul>
<input type="text" id="comment_text" />
<button id="comment_btn">Add</button>

Answer 2

在循环中分配给onclick的函数不关心在循环过程中任何值的变化。它只使用comment_url(在循环之前定义)和this。

在循环之前创建函数，并将其赋值给一个变量。

复制到循环内的onclick

Answer 3

这是一个警告，如果你有一个循环，你有一个用var声明的变量，这有时会导致问题。假设您没有在任何地方重新分配comment_ul，那么问题与您的情况无关，因此您需要做的就是让linter高兴。

一种方法是用const来声明变量(如果可能，最好用const来声明变量，如果不能用let来声明变量)。

const comment_ul = document.querySelector('.comment_ul');

另一种方法是使用forEach代替for(...。

也就是说，您的代码现在看起来有bug -每次单击comment_btn时，您都要为每个按钮添加一个事件侦听器。与其这样做，不如考虑只添加一个监听器，即永远使用事件委托。如果被点击的元素或者它的祖先元素是.comment_a，删除它的父元素。

commentContainer.addEventListener('click', (event) => {
const a = event.target.closest('.comment_a');
if (a) {
a.parentElement.remove();
}
});