Question

我有三个滑块，我们称它们为一，二，三。滑块的值应为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);
        }
    }
});

小提琴在这里，http://jsfiddle.net/RAGvr/4/，但不像第一个那样完全没有用。如果我移动滑块3，则不会触发其他滑块的回调。我做错了什么？

Answer 1

You are naming the events wrong

名称为slidechange：

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

Demo

您应该查看API for jQuery UI slider

Answer 2

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

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

Answer 3

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

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

事件sliderchange和sliderslide似乎没有像@Arun所建议的那样被解雇。

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

jQuery.on（）无法按预期工作

3 个答案: