jQuery的滑塊自動刷新變量

Question

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

我試圖刪除計算按鈕，並有所有的變量自動更新屏幕作爲用戶使用滑塊（如「英鎊」一樣）。但我所做的一切都失敗了。

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(); 
});