Question

我正在编写一个代码，其中有3个Jquery滑块，当我改变时，我想提醒3个滑块值。

这里有2个问题。

我无法提醒已更改的滑块的值。
我无法知道如何提醒所有3个滑块值。

这是我的代码。

$("#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

我无法提醒已更改的滑块的值。

之所以发生这种情况，是因为您的提醒代码中存在拼写错误，.val应为.val()，如：

$("#sliderValueC").val();

而不是：

$("#sliderValueC").val

我无法知道如何提醒所有3个滑块值。

你可以创建一个警告这三个值的函数，并在每个change回调中调用它而不是警告：

function alertValues(){
   $(".target-value").text("Hi");

    alert( $("#sliderValueA").val() );
    alert( $("#sliderValueB").val() );
    alert( $("#sliderValueC").val() );

    //Or

    var a = $("#sliderValueA").val();
    var b = $("#sliderValueB").val();
    var c = $("#sliderValueC").val();
    alert('Slider A :'+ a + ', Slider B :' + b + ', Slider C :' + c);
}

然后称之为：

change: function (event, ui) {
    alertValues();
}
//Or
change: alertValues

Answer 2

当我改变时，我想提醒3个滑块值。

您可以连接每个滑块的值，并使用\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') + '%');
    }
});

Answer 3

根据此文档http://api.jqueryui.com/slider/#method-value，要获取滑块的值，请使用$( "#slider" ).slider( "value" );

要获取所有滑块，如果ID已知，您只需调用＆＃34;值＆＃34;属性就是这样

alert($("#a").slider("value") + " " + $("#b").slider("value") + " " + $("#c").slider("value"));

或者如果它们被类引用，则可以像这样循环滑块数组

var sliderValues =  "";
$(".slider").each(() => {
    sliderValues += $(this).slider("value") + " ";
}); 
alert(sliderValues);

Answer 4

示例解决方案，以便在更改时获取所有滑块值。

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Slider - Custom handle</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #custom-handle {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    
    function alertSliderValues() {
    
        var sliderHandle1 = $("#slider1").slider("value");
        var sliderHandle2 = $("#slider2").slider("value");
        var sliderHandle3 = $("#slider3").slider("value");
    
        alert(
          "SliderHandle1=" + sliderHandle1 + 
          "\nSliderHandle2=" + sliderHandle2 + 
          "\nSliderHandle3=" + sliderHandle3
          );
    }
    
  $( function() {
   

   
    $( "#slider1").slider({
      change: function() {
        alertSliderValues();
      }
    });

    $( "#slider2").slider({
      change: function() {
        alertSliderValues();
      }
    });
    
    $( "#slider3").slider({
      change: function() {
        alertSliderValues();
      }
    });    
    
  } );
  </script>
</head>
<body>
 
<div id="slider1">
</div>
<br />

<div id="slider2">
</div>
<br />
 
<div id="slider3">
</div>
<br />
 
</body>
</html>

无法提醒jquery滑块值

4 个答案: