0

I have this class that I export: 

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

I can't find where my mistake is, since I wanted to adapt this code that I have into that class but it is not working as it is in the code below: 

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

if anybody could help me find what have I missed? Obviously, this is a filter function for a slider, and I want to put this function filterSystem() inside that class Slider.

ga4696
  • 139
  • 11

1 Answers1

1

You are needing access to two different this in that filter().

Since the filter callback is a regular function (not arrow function) then the this will be an element instance as returned by jQuery. So you need a different variable to access the class instance

Store a reference to the class this outside the filter callback

 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'})
          }
      });
  }
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • alright, I tried it like this, but it's still not working. Maybe `slider.oninput = function () { output.innerHTML = this.value; filterSystem(); }` this part is missing as it should be. Can this one `setFilter() { this.$sliderInput.oninput = function () { this.filterSystem(); } }` be wrong? – ga4696 Apr 05 '19 at 21:21
  • Ok...another `this` problem. Inside `function(){ }` it has a different context. If you use an arrow function then `this` is the class. `this.$sliderInput.oninput = () =>{ this.filterSystem(); }` – charlietfl Apr 05 '19 at 21:26
  • Important to understand: [Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable) – charlietfl Apr 05 '19 at 21:28
  • Would help if you identify what errors are thrown in console. Not sure what I need to look at now – charlietfl Apr 05 '19 at 22:04
  • I got no errors, just the slider isn't filtering what it needs to. Pretty much as I can understand `filterSystem()` is not being triggered at all somehow. – ga4696 Apr 05 '19 at 22:07
  • add some logging and/or a `debugger` statemet and step through it in dev tools debugger – charlietfl Apr 05 '19 at 22:08