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元素，这在处理函数中就是这样。

e.g。

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

Kendo Slider更改事件参数未定义

2 个答案: