Jquery Slider自动刷新变量

Question

http://jsfiddle.net/Slashus/wduac/46/

我正在尝试删除“计算”按钮，并在用户使用滑块时将所有变量自动更新到屏幕（如“Pounds”）。但我所做的一切都失败了。

function numberWithCommas(x) {
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ","); }

$(function () {
    $("#slider-range-max").slider({
         range: "max",
         min: 50,
         max: 20000,
         value: 50,
         slide: function (event, ui) {
             $("#amount").val(ui.value);
         }
    });

$("#amount").val($("#slider-range-max").slider("value"));
$("#radio").buttonset();

 $("button").button().click(function (event) {
     event.preventDefault();
     var value1 = parseInt($("#amount").val()); //get value of slider
     var result = 0;
     var radioval = $('input[name=radio]:checked', '#myForm').val();
     var tons = (value1 / 2000).toFixed(1);

     //By the pound bulk prices
     if (radioval == "handpicked" && value1 < 2000) result = value1 * 7.50;
     else if (radioval == "minerun" && value1 < 2000) result = value1 * 4.50;
     else if (radioval == "hematitemix" && value1 < 2000) result = value1 * 3.50;

     //By the ton bulk prices
     else if (radioval == "handpicked" && value1 > 2000) result = value1 * 5.99;
     else if (radioval == "minerun" && value1 > 2000) result = value1 * 3.99;
     else if (radioval == "hematitemix" && value1 > 2000) result = value1 * 2.99;

     //Show Results
     var perpoundamt = (result / value1).toFixed(2);
     var finalcostraw = Math.round(result);
     var finalcost = numberWithCommas(finalcostraw);

     $("#resultlabel").text("Result: " + "$" + finalcost); //show result
     $("#perpoundlabel").text("Per Pound " + "$" + perpoundamt); //show result
     $("#tonslabel").text("Number of tons " + tons); //show result
 });

}）;

Answer 1

在这里：http://jsfiddle.net/nadCx/

你需要滑块内的更改选项，如...

$("#slider-range-max").slider({
     range: "max",
     min: 50,
     max: 20000,
     value: 50,
     slide: function (event, ui) {
         $("#amount").val(ui.value);
     },
     change: function(event, ui) {
         alert("Changing, this is where button code goes");
     }
 });

完整代码

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}

$(function () {

     $("#slider-range-max").slider({
         range: "max",
         min: 50,
         max: 20000,
         value: 50,
         slide: function (event, ui) {
             $("#amount").val(ui.value);
         },
         change: function(event, ui) {

             //This happends when you change the slider value
             event.preventDefault();
             var value1 = parseInt($("#amount").val()); //get value of slider
             var result = 0;
             var radioval = $('input[name=radio]:checked', '#myForm').val();
             var tons = (value1 / 2000).toFixed(1); 

             //By the pound bulk prices
             if (radioval == "handpicked" && value1 < 2000) result = value1 * 7.50;
             else if (radioval == "minerun" && value1 < 2000) result = value1 * 4.50;
             else if (radioval == "hematitemix" && value1 < 2000) result = value1 * 3.50;

             //By the ton bulk prices
             else if (radioval == "handpicked" && value1 > 2000) result = value1 * 5.99;
             else if (radioval == "minerun" && value1 > 2000) result = value1 * 3.99;
             else if (radioval == "hematitemix" && value1 > 2000) result = value1 * 2.99;

             //Show Results
             var perpoundamt = (result / value1).toFixed(2);
             var finalcostraw = Math.round(result);
             var finalcost = numberWithCommas(finalcostraw);

             $("#resultlabel").text("Result: " + "$" + finalcost); //show result
             $("#perpoundlabel").text("Per Pound " + "$" + perpoundamt); //show result
             $("#tonslabel").text("Number of tons " + tons); //show result

         }
     });

     $("#amount").val($("#slider-range-max").slider("value"));
     $("#radio").buttonset();
 });