Question

我正在使用Vanilla JS进行实践，并构建了一个类似于jQuery的库，但是这里的一个错误是$('div').addClass('blue');行不能按预期工作。

Answer 1

我很确定您使用assign将元素分配给此元素的方式行不通。我不确定是否真的需要，只要保留对元素的引用，它就不会那么混乱了。

除此之外，您还需要使用forEach而不是每个NodeList集合，将小提琴中的addClass更改为以下内容使其可以工作：

  addClass(className) {
    return this.element.forEach((el) => {
        el.classList.add(className);
    });
  }

编辑：仔细检查，我能不能真正使用each，那是您班级的内部方法。

完整的代码如下所示：

class DOM {
  constructor(element){
    this.element = document.querySelectorAll(element);
  }

  addClass(className) {
    return this.element.forEach((el) => {
        el.classList.add(className);
    });
  }

  removeClass(className){
    return this.element.forEach((el) => {
        el.classList.remove(className);
    });
  }
}

或者，如果您真的想保留each方法，类似的方法也可以：

class DOM {
    constructor(element){
    this.element = document.querySelectorAll(element);
  }

  addClass(className) {
    return this.each((el) => {
        el.classList.add(className);
    });
  }

    removeClass(className){
    return this.each((el) => {
        el.classList.remove(className);
    });
  }

  each(callback){
    // convert this to Array to use for...of
    for (let el of Array.from(this.element)) {
      callback(el);
    }

    // return this for chaining
    return this;
  }
}

带有VanillaJS的类似jQuery的库

1 个答案: