jQuery get the tager from event

Viewed 40

I am using Hexagon.js and I need to get the .html() of the caller. If i do something like event.target and start moving with the slider, as long as the cursor is on the slider it works just fine, but if i move the cursor somewhere else (and still holding the slider, just like any other, dragging it with cursor and moving outisde of the slider box), I will get the data of that element I am currently hovering above. I need just the data of the caller, not form enyone else.

$(".slider").each(function() {
  slider = new hx.Slider(this, {max:100});

  slider.on('change', function(value){
    var target = $( event.target );
    console.log(target);
  });
});

Thanks for any hep.

1 Answers

Without seeing the html it's a little bit hard to answer but well, according to docs you have to initialize the slider with an html element and, you do.

new hx.Slider(this, {max:100});

this in this line is the html element, so you could just use it.

Now the problem is that since you use function () {...} syntax, each function has its own this.

You may either use arrow function (they don't have their own this) as .on(...) callback (if it works ok, because sometimes it doesn't with JQuery) or save current this in a variable.

$(".slider").each(function(){

  const slide = this;

  const slider = new hx.Slider(
     slide,
     {max:100}
   );

  slider.on('change', function(value){
    console.log(slide, `is html element!`);
    console.log(value, `is the value that has just changed!`);
  });

});
Related