將eventListeners添加到for循環中的複選框chrome擴展

Question

我有一個函數可以獲取窗口中的所有選項卡，然後通過爲每個選項卡添加複選框來更新popup.html頁面。做完這些之後，會有第二個for循環添加事件偵聽器，用於更新包含複選框值的字典。問題是，我點擊的任何複選框只會更新字典中的最後一個元素。

下面是代碼：

function viewTabs() { 
    var queryInfo = {lastFocusedWindow: true}; 
    // Go through all the tabs open, and add them to the scrollview along with a number and checkbox 
    chrome.tabs.query(queryInfo, function(tabs) { 
    document.getElementById("openLinks").innerHTML = ""; 
    (function() { 
     for (i = 0; i < tabs.length; i++) { 
     // add checkboxes to each link for the user to include or disclude 
     document.getElementById("openLinks").innerHTML += 
      "<li><input type=\"checkbox\" id = \"" + i.toString() + "\" checked>" + 
      tabs[i].title + "</li>"; 
     checkedTabsArr[i.toString()] = true; 
     } 
     for (i = 0; i < tabs.length; i++) { 
     document.getElementById(i.toString()).addEventListener("click", 
      function() { 
      console.log(checkedTabsArr); 
      checkedTabsArr[i.toString()] = !checkedTabsArr[i.toString()]; 
     }); 
     } 
    }()); 
    }); 
} 

這裏是輸出（我點擊不同的複選框不只是6）：

Object {0: true, 1: true, 2: true, 3: true, 4: true, 5: true, 6: true} 
Buttons.js:174 Object {0: true, 1: true, 2: true, 3: true, 4: true, 5: true, 6: true, 7: true} 
Buttons.js:174 Object {0: true, 1: true, 2: true, 3: true, 4: true, 5: true, 6: true, 7: false} 
Buttons.js:174 Object {0: true, 1: true, 2: true, 3: true, 4: true, 5: true, 6: true, 7: true} 
Buttons.js:174 Object {0: true, 1: true, 2: true, 3: true, 4: true, 5: true, 6: true, 7: false} 
Buttons.js:174 Object {0: true, 1: true, 2: true, 3: true, 4: true, 5: true, 6: true, 7: true} 
Buttons.js:174 Object {0: true, 1: true, 2: true, 3: true, 4: true, 5: true, 6: true, 7: false} 
Buttons.js:174 Object {0: true, 1: true, 2: true, 3: true, 4: true, 5: true, 6: true, 7: true} 
Buttons.js:174 Object {0: true, 1: true, 2: true, 3: true, 4: true, 5: true, 6: true, 7: false} 

我已經有和沒有封閉審判。

Answer 1

爲什麼在同一個上下文中使用兩個單獨的for循環？

編輯 我跟蹤了這​​個問題，看看javascript如何處理點擊和更改事件與複選框。

注意：請勿使用點擊事件複選框，請改爲使用onChange。另外，請勿使用JavaScript分配onchange。由於某些我無法識別的原因，它失敗了。

相反，使用它的jQuery。 確保您的頁面上包含jQuery庫，並在頁面上加載所有DOM元素後加載腳本。那麼這個代碼應該爲你工作得很好：

function viewTabs() { 
    var queryInfo = { 
     lastFocusedWindow: true 
    }; 

    // Go through all the tabs open, and add them to the scrollview along with a number and checkbox 
    chrome.tabs.query(queryInfo, function (tabs) { 

     for (i = 0; i < tabs.length; i++) { 
      var thisTab = tabs[i]; 

      // add checkboxes to each link for the user to include or disclude 
      // start by creating a blank checkbox element 
      var thisCheckbox = document.createElement('input'); 
      thisCheckbox.type = "checkbox"; 
      thisCheckbox.id = i; 
      thisCheckbox.checked = true; 

      //Add the event listener to the newly created checkbox 
      attachChangeListener(thisCheckbox, i); 
      console.log(thisCheckbox); 

      // create a blank <li> 
      var thisListItem = document.createElement('li'); 

      // add the checkbox and tab title to <li> 
      thisListItem.appendChild(thisCheckbox); 
      thisListItem.appendChild(document.createTextNode(thisTab.title)); 

      // add <li> to the end of the openLinks element and add a new value to the array 
      document.getElementById("openLinks").appendChild(thisListItem); 
      checkedTabsArr[i] = true; 

      console.log(tabs[i].title + ": " + thisCheckbox.checked); 

     } 

     function toggle(checkbox, title) { 
      console.log("CLICK EVENT FOR: " + title); 

      //toggle the state of the checkbox 
      checkbox.checked = !checkbox.checked; 
      console.log(title + " updated: " + checkbox.checked); 


     } 

     function attachChangeListener(element, index) { 
      $(element).change(function() { 
       if ($(this).is(":checked")) { 
        //match the array's value to that of the new checkbox state 
        checkedTabsArr[index] = true; 
        console.log(checkedTabsArr); 
       } else { 
        //match the array's value to that of the new checkbox state 
        checkedTabsArr[index] = false; 
        console.log(checkedTabsArr); 
       } 
      }); 
     } 
    }); 

上面的代碼應該有希望成爲一個插件和播放解決方案。

讓我知道這是怎麼回事。

小提琴：https://jsfiddle.net/wof8ebq7/27/