1

我有三个滑块，我们称它们为一、二、三。滑块的值应该是one >= two >= three。

我创建了一个小提琴，在创建滑块时设置了更改和滑动的回调：

$(document).ready(function() {
    var oneValue = 5,
        twoValue = 3,
        threeValue =1;

    var one = $('#one'),
        two = $('#two'),
        three = $('#three');

    one.slider({
        min: 0,
        max: 10,
        value: oneValue,
        change: function(e, ui) {
            oneValue = ui.value;
            oneTest();
        },
        slide: function(e, ui) {
            oneValue = ui.value;
            oneTest();
        }
    });

    two.slider({
        min: 0,
        max: 10,
        value: twoValue,
        change: function(e, ui) {
            twoValue = ui.value;
            twoTest();
        },
        slide: function(e, ui) {
            twoValue = ui.value;
            twoTest();
        }
    });

    three.slider({
        min: 0,
        max: 10,
        value: threeValue,
        change: function(e, ui) {
            threeValue = ui.value;
            threeTest();
        },
        slide: function(e, ui) {
            threeValue = ui.value;
            threeTest();
        }
    });

    function oneTest() {
        console.log('oneTest');
        if (oneValue < twoValue) {
            two.slider('value', oneValue);
        }
    }
    function twoTest() {
        console.log('twoTest');
        if (twoValue < threeValue) {
            three.slider('value', twoValue);
        }
        if (twoValue > oneValue) {
            one.slider('value', twoValue);
        }
    }
    function threeTest() {
        console.log('threeTest');
        if (threeValue > twoValue) {
            two.slider('value', threeValue);
        }
    }
});

小提琴在这里：http: //jsfiddle.net/RAGvr/3/。它像我期望的那样工作。

但是，我需要能够在创建滑块后附加事件处理程序。所以我创建了滑块，然后用 jQuery.on()监听change和事件。slide像这样：

$(document).ready(function() {
    var oneValue = 5,
        twoValue = 3,
        threeValue =1;

    var one = $('#one'),
        two = $('#two'),
        three = $('#three');

    one.slider({
        min: 0,
        max: 10,
        value: oneValue
    });

    two.slider({
        min: 0,
        max: 10,
        value: twoValue
    });

    three.slider({
        min: 0,
        max: 10,
        value: threeValue
    });

    one.on('change slide', function(e, ui) {
        oneValue = ui.value;
        oneTest();
    });

    two.on('change slide', function(e, ui) {
        twoValue = ui.value;
        twoTest();
    });

    three.on('change slide', function(e, ui) {
        threeValue = ui.value;
        threeTest();
    });

    function oneTest() {
        console.log('oneTest');
        if (oneValue < twoValue) {
            two.slider('value', oneValue);
        }
    }
    function twoTest() {
        console.log('twoTest');
        if (twoValue < threeValue) {
            three.slider('value', twoValue);
        }
        if (twoValue > oneValue) {
            one.slider('value', twoValue);
        }
    }
    function threeTest() {
        console.log('threeTest');
        if (threeValue > twoValue) {
            two.slider('value', threeValue);
        }
    }
});

Fiddle 在这里，http://jsfiddle.net/RAGvr/4/，但根本不像第一个那样工作。如果我移动滑块 3，则不会触发其他滑块的回调。我究竟做错了什么？

4

3 回答 3

2

您将事件命名错误。

名称是slidechange：

one.on('slidechange', function(e, ui) {
    oneValue = ui.value;
    oneTest();
});

演示

您应该查看jQuery UI 滑块的 API

于 2013-04-17T14:12:33.080 回答
1

当您在配置之外使用 jquery ui 小部件事件时，您需要预先添加小部件名称

one.on('sliderchange slide', function(e, ui) {
    oneValue = ui.value;
    oneTest();
});
于 2013-04-17T14:14:50.810 回答
0

你们都部分正确，我非常感谢您的快速回答。slide监听和事件的正确方法change应该是：

one.on('slide slidechange', function(e, ui) {
// code here
});

尽管正如@Arun 所建议的那样，这些事件似乎sliderchange并sliderslide没有被解雇。

这是更新事件名称的小提琴：http: //jsfiddle.net/RAGvr/7/。

于 2013-04-17T14:31:47.103 回答