javascript - 无法提醒 jquery slider 值

Question

我正在编写一个代码，其中存在 3 个 Jquery slider ，当我更改时，我想提醒这 3 个 slider 值。

这里我有两个问题。

1. 我无法提醒已更改的 slider 值。
2. 我无法知道如何提醒所有 3 个 slider 值。

这是我的代码。

$("#a").slider({
    range: "min",
    orientation: "vertical",
    step: 1,
    value: 10,
    max: 14,
    min: 8.5,
    create: function (event, ui) {
        $("#a").find(".ui-slider-handle").append('<input id="sliderValueA" />')
    },
    slide: function (event, ui) {
        $("#sliderValueA").val(ui.value + "%");
    },
    change: function (event, ui) {
        $(".target-value").text("Hi");
        alert($("#sliderValueA").val);
    }
});


$("#b").slider({
    range: "min",
    orientation: "vertical",
    value: 0.9,
    step: 0.2,
    min: 0.4,
    max: 1.98,
    create: function (event, ui) {
        $("#b").find(".ui-slider-handle").append('<input id="sliderValueB" />')
    },
    slide: function (event, ui) {
        $("#sliderValueB").val(ui.value + "g");
    },
    change: function (event, ui) {
        $(".target-value").text("Hi");
        alert($("#sliderValueB").val);
    }
});

$("#c").slider({
    range: "min",
    orientation: "vertical",
    value: 20,
    min: 6,
    max: 155,
    create: function (event, ui) {
        $("#c").find(".ui-slider-handle").append('<input id="sliderValueC" />')
    },
    slide: function (event, ui) {
        $("#sliderValueC").val(ui.value + "%");
    },
    change: function (event, ui) {
        $(".target-value").text("Hi");
        alert($("#sliderValueC").val);
    }
});

请让我知道我哪里出了问题以及如何解决这个问题。

谢谢

Answer 1

when I change I want to alert the 3 sliders values.

您可以连接每个 slider 的值，并使用 \n 将每个值放在警报内的新行上。

以下是您的警报所需的代码:

alert('Slider A is: ' + $('#a').slider('value') + '%\nSlider B is: ' + $('#b').slider('value') + 'g\nSlider C is: ' + $('#c').slider('value') + '%');

所以你的代码将如下所示:

$("#a").slider({
    range: "min",
    orientation: "vertical",
    step: 1,
    value: 10,
    max: 14,
    min: 8.5,
    create: function(event, ui) {
        $("#a").find(".ui-slider-handle").append('<input id="sliderValueA" />')
    },
    slide: function(event, ui) {
        $("#sliderValueA").val(ui.value + "%");
    },
    change: function(event, ui) {
        alert('Slider A is: ' + $('#a').slider('value') + '%\nSlider B is: ' + $('#b').slider('value') + 'g\nSlider C is: ' + $('#c').slider('value') + '%');
    }
});


$("#b").slider({
    range: "min",
    orientation: "vertical",
    value: 0.9,
    step: 0.2,
    min: 0.4,
    max: 1.98,
    create: function(event, ui) {
        $("#b").find(".ui-slider-handle").append('<input id="sliderValueB" />')
    },
    slide: function(event, ui) {
        $("#sliderValueB").val(ui.value + "g");
    },
    change: function(event, ui) {
        alert('Slider A is: ' + $('#a').slider('value') + '%\nSlider B is: ' + $('#b').slider('value') + 'g\nSlider C is: ' + $('#c').slider('value') + '%');
    }
});

$("#c").slider({
    range: "min",
    orientation: "vertical",
    value: 20,
    min: 6,
    max: 155,
    create: function(event, ui) {
        $("#c").find(".ui-slider-handle").append('<input id="sliderValueC" />')
    },
    slide: function(event, ui) {
        $("#sliderValueC").val(ui.value + "%");
    },
    change: function(event, ui) {
        alert('Slider A is: ' + $('#a').slider('value') + '%\nSlider B is: ' + $('#b').slider('value') + 'g\nSlider C is: ' + $('#c').slider('value') + '%');
    }
});