剑道滑块变​​化事件参数undefined

Question

我在页面上有多个剑道滑块。当一个滑块的值发生变化时，我想识别哪个滑块触发了更改事件，以便根据所选值更改其颜色。

<div id="div_slider"> 
    <input id="slider1" data-bind="kendoSlider: { value: myValue, min: 0, max: 5,change: changeSlider }" /> 
    <input id="slider2" data-bind="kendoSlider: { value: myValue, min: 0, max: 5,change: changeSlider }" /> 
    <input id="slider3" data-bind="kendoSlider: { value: myValue, min: 0, max: 5,change: changeSlider }" /> 
</div> 

我有我的淘汰赛绑定如下

<script type="text/javascript"> 

    var ViewModel = function() { 
     this.myValue = 5; 

     this.changeSlider = function(data, event) { 
      console.log(data); 
      console.log(event); 
     }; 
    }; 

    ko.applyBindings(new ViewModel()); 
</script> 

的问题是，滑块改变功能的事件参数始终是不确定的。有没有人有任何想法为什么？

Answer 1

我想通了，只好用'this'来得到元素id。下面的代码： （更新代码，使用下面Pechka的建议后包装）

this.changeSlider = function (data, event) { 

     if (data.value === 1) { 
      this.wrapper.find('.k-slider-selection').css('background-color', 'red'); 
     } else if (data.value === 2) { 
      this.wrapper.find('.k-slider-selection').css('background-color', 'orange'); 
     } else if (data.value === 3) { 
      this.wrapper.find('.k-slider-selection').css('background-color', 'yellow'); 
     } else if (data.value === 4) { 
      this.wrapper.find('.k-slider-selection').css('background-color', 'green'); 
     } else if (data.value === 5) { 
      this.wrapper.find('.k-slider-selection').css('background-color', 'blue'); 
     }  
}; 

Answer 2

您可以通过窗口小部件，这是本在处理函数的包装现场访问包装html元素。

例如

this.changeSlider = function(){ 
    this.wrapper.find('.k-slider-selection').css('background-color', 'red'); 
}