Question

我创建了5个滑块，可以在滑动时更改它们的值。现在我想将这些滑块的值存储在变量中，以便我可以进行一些计算，例如添加所有滑块的总值并打印它们。

这是我的代码。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Slider functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      <script>
         $(function() {

            $( "#slider-1" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 0, 0],
               slide: function( event, ui ) {
                  $( "#priceA" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
           });
         $( "#priceA" ).val( "$" + $( "#slider-1" ).slider( "values", 0 ) +
            " - $" + $( "#slider-1" ).slider( "values", 1 ) );

            $( "#slider-2" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 0, 0],
               slide: function( event, ui ) {
                  $( "#priceB" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
           });
         $( "#priceB" ).val( "$" + $( "#slider-2" ).slider( "values", 0 ) +
            " - $" + $( "#slider-2" ).slider( "values", 1 ) );

            $( "#slider-3" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 0, 0],
               slide: function( event, ui ) {
                  $( "#priceC" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
           });
         $( "#priceC" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
            " - $" + $( "#slider-3" ).slider( "values", 1 ) );

            $( "#slider-4" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 0, 0],
               slide: function( event, ui ) {
                  $( "#priceD" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
           });
         $( "#priceD" ).val( "$" + $( "#slider-4" ).slider( "values", 0 ) +
            " - $" + $( "#slider-4" ).slider( "values", 1 ) );

            $( "#slider-5" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 0, 0],
               slide: function( event, ui ) {
                  $( "#priceE" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
           });
         $( "#priceE" ).val( "$" + $( "#slider-5" ).slider( "values", 0 ) +
            " - $" + $( "#slider-5" ).slider( "values", 1 ) );

         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <p>
         <label for="priceA">Price rangeA:</label>
         <input type="text" id="priceA" 
            style="border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id="slider-1"></div>

      <p>
         <label for="priceB">Price rangeB:</label>
         <input type="text" id="priceB" 
            style="border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id="slider-2"></div>
      <p>
         <label for="priceC">Price rangeC:</label>
         <input type="text" id="priceC" 
            style="border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id="slider-3"></div>
      <p>
         <label for="priceD">Price rangeD:</label>
         <input type="text" id="priceD" 
            style="border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id="slider-4"></div>
      <p>
         <label for="priceE">Price rangeE:</label>
         <input type="text" id="priceE" 
            style="border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <div id="slider-5"></div>

   </body>
</html>

Answer 1

您可以使用API获取滑块的值（或本例中的范围）：http://api.jqueryui.com/slider/#option-values

这是一个小提琴，它将每个滑块上范围顶部的值相加：

http://jsfiddle.net/Epcm3/1/

这是进行计算的代码部分：

function getValues() {
    var total = 0;
    $("div[id^='slider']").each(function () {
        var values = $(this).slider("option", "values");
        total += values[1];
    });
    $("#totals").text(total);
}

Answer 2

如果您想引用任何range输入的值，您只需使用$('#id').val();并将其分配给某个变量即可执行操作。

例如，使用rangeC

var pricecVal = $('#priceC').val();

每当用户使用全局变量更改范围时，您甚至可以更新该值：

$("#priceC").bind("change", function() {
    pricecVal = $(this).val();
});

如何将滑块的值存储在变量中

2 个答案: