Question

我要在页面中循环数据，它们显示的很好，但是当我尝试单击三个复选框之一并隐藏所需的行时，似乎得到了错误的值。

这是活动中的实时页面的链接。这是需要修复的代码。

https://musing-jang-0e572c.netlify.com/senate-data.html-> PAGE

https://github.com/Makkoyev/ubiqum-task2/blob/master/assets/js/manipulation.js->复选框部分GitHub

这是代码：

(function () {
if (currentURL.indexOf("senate-data.html") == true) {
    getSenate();
    cbs = document.querySelectorAll("input[type=checkbox]");
    targets = document.querySelectorAll("#table tr td:nth-child(2)");
    tr = document.querySelectorAll("#table tr");
    for (i = 0; i < cbs.length; i++) {
        cbs[i].addEventListener('change', function () {
            if (this.checked) {
                // Checkbox is checked..
                console.log("Checkbox checked!", this.value);
                for(i = 0; i < targets.length; i++){
                    if(this.value == targets[i].innerHTML){
                        console.log("Uguale", targets[i]);
                        targets[i].parentNode.classList.add("hide-row");
                    }
                }
            } else {
                // Checkbox is not checked..
                console.log("Checkbox unchecked!", this.value)
            }
        });
    }
}
if (currentURL.indexOf("house-data.html") == true) {
    getHouse();
}

}）（）;

Answer 1

您可能想要这样的东西

FIDDLE

window.addEventListener("load", function() { // on page load
  [...document.querySelectorAll("input[type=checkbox]")].forEach(function(cbs) { // take all checkboxes 
    cbs.addEventListener('change', function() { // when they change
      var vals = [...document.querySelectorAll(".filters input[type=checkbox]:checked")].map(chk => chk.value); // get all checked values
      [...document.querySelectorAll("#table tr td:nth-child(2)")].forEach(function(target) { // for all cell 2
        target.parentNode.classList.toggle("hide-row",
          vals.indexOf(target.textContent) == -1); // hide the ones NOT in the above list
      });
    });
  });
})

JavaScript表中的循环错误复选框值

1 个答案: