事件切换监听器

Question

我正在尝试使用 ui.activeFilter() 方法更改一些样式，但它说：

无法读取toggle 的属性undefined。

我将变量filterLinks 设置为全局范围。我不知道为什么它不起作用。

"use strict";

// UI elements
const filterLinks = document.querySelectorAll('a');
const itemsLeft = document.querySelectorAll('span');

// Event listeners
filterLinks.forEach(function(link) {
  link.addEventListener('click', check);
});

// Laptops
class Laptop {
    constructor(availability, price, brand) {
      this.availability = availability;
      this.price = price;
      this.brand = brand;
    }
}

// Filter methods
class UiMethod {
    activeFilter(dddd) {
        dddd.classList.toggle('checked');

        if(dddd.className === 'checked') {
            console.log("test");
        } else {
            console.log('Try again you can do it, you are close to the succes');
        }
    }
}

const ui = new UiMethod;

// Function helpers
function check(e) {

    ui.activeFilter(filterLinks);
    e.preventDefault();
}

Answer 1

简单的解决方案，您的check(e) 函数需要稍作更新。无需传递整个对象，您只需传递 click 函数的 e.target 即可仅影响该对象。

改变： ui.activeFilter(filterLinks);

到： ui.activeFilter(e.target);

"use strict";

// UI elements
const filterLinks = document.querySelectorAll('a');

// Event listeners
filterLinks.forEach(function(link) {
  link.addEventListener('click', check);
});

// Laptops
class Laptop {
    constructor(availability, price, brand) {
      this.availability = availability;
      this.price = price;
      this.brand = brand;
    }
}

// Filter methods
class UiMethod {
    activeFilter(dddd) {
        dddd.classList.toggle('checked');

        if(dddd.className === 'checked') {
            console.log("test");
        } else {
            console.log('Try again you can do it, you are close to the succes');
        }
    }
}

const ui = new UiMethod;

// Function helpers
function check(e) {
    ui.activeFilter(e.target);
    e.preventDefault();
}

.checked{
color:red;
}

<a href="#">test</a><BR>
<a href="#">test2</a><BR>
<a href="#">test3</a>

Answer 2

无法读取未定义的属性toggle。

看起来toggle 在这里被引用：dddd.classList.toggle。因此，dddd.classList 未定义。 classList 是所有 DOM 元素对象的已定义属性，所以 dddd 一定不是你想的那样。

回顾dddd的定义，我们可以看到它被定义为filterLinks。看filterLinks，很明显是document.querySelectorAll('a')设置的。

检查querySelectorAll 的文档告诉我们它返回了：

一个非活动的NodeList 包含一个Element 对象，每个元素至少匹配一个指定的选择器或一个空的NodeList 在没有匹配的情况下。

因此，要访问查询找到的实际 DOM 元素对象，我们需要从 NodeList 中提取该对象。如果您想对找到的每个 元素执行toggle 操作，最简单的方法是循环遍历NodeList 并在每个元素上运行该函数。 NodeList 类似于数组，但它不是数组，因此我们需要将其转换为数组才能在其上使用forEach。这将产生以下代码：

Array.from(dddd).forEach(element => element.classList.toggle('checked'));

这将取代这个：

dddd.classList.toggle('checked');