将eventListeners添加到chrome-extension中for循环的复选框中

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/