Javascript 在jquery中找不到此类上的错误

我有一个导出的类：

import $ from 'jquery';


export default class Slider {

  constructor(el) {
    this.el = el;
    this.$el = $(el);
    this.$sliderInput = this.$el.find('.slider__input');
    this.$value = this.$el.find('.slider__value');

    this.$changeInputs = $('[data-type=changeable]');

init() {
    this.filterSystem();
    this.setValue();

    this.$sliderInput.on('input change', () => {
        this.setValue();
        // this.filterSystem();

        this.$changeInputs.find('.slider__input').val(
            this.$sliderInput.val()
        ).trigger('change');
    });

    this.$sliderInput.on('mouseup', () => {
      this.filterSystem();
    });


}

setValue() {
    this.$value.text(
        this.$sliderInput.val()
    );
}


filterSystem() {

    const self = this;// the class instance


    $("em.match.js-match").css({
        'background-color': '#fff',
        'color': '#000'
    }).filter(function () {
        // no arrow function so "this" is the element instance from jQuery

        const $elem = $(this);

        var length = parseInt($elem.attr("data-length"));
        if (self.$sliderInput.val() <= length) {
            // class property
            $elem.css({'background-color': $elem.attr("data-color"), 'color': '#fff'})
        }
    });
}
}

我找不到我的错误在哪里，因为我想将我的代码改编成那个类，但它没有像下面的代码那样工作：

var slider = document.getElementById("rangeslider");
var output = document.getElementById("value");
output.innerHTML = slider.value;

slider.oninput = function () {
    output.innerHTML = this.value;
    filterSystem();
}

function filterSystem() {
    $("em.match.js-match").css({
        'background-color': '#fff',
        'color': '#000'
    }).filter(function () {
        var length = parseInt($(this).attr("data-length"));
        if (slider.value <= length) {
            $(this).css({'background-color': $(this).attr("data-color"), 'color': '#fff'})
        }
    });
}

---

如果有人能帮我找到我错过了什么？显然，这是一个滑块的过滤函数，我想把这个函数filterSystem放在类滑块中

您需要访问该筛选器中的两个不同的

由于过滤器回调是一个常规函数而不是arrow函数，因此这将是jQuery返回的元素实例。因此，您需要一个不同的变量来访问类实例

在筛选器回调外部存储对此类的引用

 filterSystem() {

      const self = this;// the class instance


      $("em.match.js-match").css({
          'background-color': '#fff',
          'color': '#000'
      }).filter(function () {
          // no arrow function so "this" is the element instance from jQuery

          const $elem = $(this);      

          const length = parseInt($elem.attr("data-length"));
          if (self.$sliderInput.val() <= length) {
            // ^^^^^^^^^^^^^^^  class property
              $elem.css({'background-color': $elem.attr("data-color"), 'color': '#fff'})
          }
      });
  }

---

好吧，我试过了，但还是不行。可能slider.oninput=function{output.innerHTML=this.value；filterSystem；}此部分本应缺失。这个setFilter{this.$sliderInput.oninput=函数{this.filterSystem；}}可能是错误的吗？好的……另一个问题。在函数{}内，它具有不同的上下文。如果使用箭头函数，则这是类。这个。$sliderInput.oninput==>{this.filterSystem；}需要理解的重要信息：如果您确定控制台中抛出了哪些错误，这将很有帮助。不确定我现在需要看什么我没有错误，只是滑块没有过滤它需要的东西。据我所知，过滤器系统根本没有被触发。