Object 修改動態創建的元素事件監聽器的問題

Question

在使用 Vanilla Javascript 對動態創建的元素使用事件偵聽器時，我遇到了一個非常有趣的問題。 我將首先定義問題，然后發布代碼。

我使用 javascript 創建動態 html 元素，並在創建過程中在每個新創建的 object 上添加“單擊”事件偵聽器。 在此事件事件偵聽器中，我更改了 GLOBAL object 的不同屬性。 我的意思是，當您單擊動態創建的元素時，每個元素都會修改此全局 object 的不同屬性。

問題出現在這里，我動態select全局object的不同屬性。 因此，對於每個元素，它都會修改全局 object 的不同屬性。 但是當我運行代碼時，我看到每個元素只更改全局 object 的最新屬性。 這意味着每個元素都會更改 object 的相同屬性，它是 object 的最新屬性。 這里的代碼：

var filter = {1:false, 4:false, 7:false, 11:false, 8:false} //global object
var productsAndIndexes = {a:1, b:4, c:7, d:11, e:8 } //another global object used for looping 
function createEmptyFilter(){
  var hdr = document.querySelector("div.content .headers");
  for(var product in productsAndIndexes){
    var inp = document.createElement("input");
    inp.setAttribute("type", "checkbox");
    var filterInd = productsAndIndexes[product];

    inp.addEventListener("click" , (e) => {
      if(e.target.checked){
        filters[ filterInd ] = true;
      }else{
        filters[ filterInd ] = false;
      }
    });

    hdr.appendChild(inp);
  }
}
createEmptyFilter();

每次我選中一個復選框時，都會得到 filter = {1:false, 4:false, 7:false, 11:false, 8:true}。 但是每個復選框都應該修改 object 中的相關部分。

感謝您對問題的任何解釋和解決方案（盡管我不是 15 代表:)）謝謝

Answer 1

問題是您的filterInd變量是用var聲明的，這意味着它是function scoped ，而不是您的 for 循環塊。 這意味着每次循環迭代都會覆蓋同一個變量，因此點擊處理程序都關閉同一個變量，而不是具有不同值的唯一變量。 用const或let聲明它， click處理程序將引用循環迭代唯一的值。

由於您使用的瀏覽器足夠現代以支持=> ，那么您可能支持let和const ； 現在真的沒有充分的理由使用var 。

const filter = {1:false, 4:false, 7:false, 11:false, 8:false} //global object
const productsAndIndexes = {a:1, b:4, c:7, d:11, e:8 } //another global object used for looping 
function createEmptyFilter(){
  const hdr = document.querySelector("div.content .headers");
  for (let product in productsAndIndexes) {
    const inp = document.createElement("input");
    inp.setAttribute("type", "checkbox");
    const filterInd = productsAndIndexes[product];

    inp.addEventListener("click", e => {
      if (e.target.checked) {
        filters[filterInd] = true;
      } else {
        filters[filterInd] = false;
      }
    });

    hdr.appendChild(inp);
  }
}
createEmptyFilter();