Question

我有要导出的此类：

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'})
        }
    });
}

如果有人可以帮助我找到我错过的内容？显然，这是滑块的过滤器功能，我想将此function filterSystem()放在该类Slider中。

Answer 1

您需要访问this中的两个不同的filter()。

由于过滤器回调是常规函数（不是箭头函数），所以this将是jQuery返回的元素实例。因此，您需要一个不同的变量来访问类实例

在过滤器回调之外存储对类this的引用

 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'})
          }
      });
  }

在jQuery中找不到此类的错误

1 个答案: