1

1ページに複数の剣道スライダーがあります。スライダーの値が変更されたときに、選択した値に基づいて色を変更できるように、変更イベントをトリガーしたスライダーを特定したいと思います。

<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>

問題は、スライダー変更機能のイベントパラメーターが常に未定義であるということです。なぜ誰かが何か考えを持っていますか？

4

2 に答える 2

1

私はそれを理解し、要素IDを取得するために「this」を使用する必要がありました。以下のコード:(以下の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');
        }    
 };
于 2013-01-22T23:10:44.140 に答える
1

ウィジェットのラッパーフィールドからラッピングhtml要素にアクセスできます。これは、ハンドラー関数にあります。

例えば

this.changeSlider = function(){
   this.wrapper.find('.k-slider-selection').css('background-color', 'red');
}
于 2013-01-22T23:33:15.450 に答える