Question

我正在使用bootstrap幻灯片，你可以从这里找到代码 http://bootsnipp.com/snippets/2XQ2

如何更改价格格式，现在显示价格为1000美元。

我想要这样的1000美元等等150,000美元。

<script>
  $(document).ready(function() {
      $("#slider").slider({
          range: "min",
          animate: true,
          value:1,
          min: 10000,
          max: 300000,
          step: 100,
          slide: function(event, ui) {
            update(1,ui.value); //changed
          }
      });

      //Added, set initial value.
      $("#amount").val(0);
      $("#amount-label").text(0);
      update();
  });

  //changed. now with parameter
  function update(slider,val) {
    //changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
    var $amount = slider == 1?val:$("#amount").val();

     $total = "£" + ($amount * 10);
     $( "#amount" ).val($amount);
     $( "#amount-label").text($amount);
     $( "#total" ).val($total);
     $( "#total-label" ).text($total);

     $('#spend').html('<label> '+$amount+' </label>');
  }

</script>

Answer 1

您可以使用jquery的mask插件。

像这样：

$(‘.money’).mask(‘000,000,000,000,000.00’, {reverse: true});

（这是一个例子）。

以下是文档：https://igorescobar.github.io/jQuery-Mask-Plugin/

Answer 2

你可以这样做：

function update(slider,val) {
      var formatNumber = {
         separador: ",", 
         sepDecimal: '.',
         formatear:function (num){
          num +='';
          var splitStr = num.split('.');
          var splitLeft = splitStr[0];
          var splitRight = splitStr.length > 1 ? this.sepDecimal + splitStr[1] : '';
          var regx = /(\d+)(\d{3})/;
          while (regx.test(splitLeft)) {
          splitLeft = splitLeft.replace(regx, '$1' + this.separador + '$2');
          }
          return this.simbol + splitLeft  +splitRight;
         },
         new:function(num, simbol){
          this.simbol = simbol ||'';
          return this.formatear(num);
         }
        }
    //changed. Now, directly take value from ui.value. if not set (initial, will use current value.)
    var $amount = slider == 1?val:$("#amount").val();
    var $duration = slider == 2?val:$("#duration").val();

    /* commented
    $amount = $( "#slider" ).slider( "value" );
    $duration = $( "#slider2" ).slider( "value" );
     */

     $total = ($amount * $duration);
     $total = formatNumber.new($total,"$"); 
     $( "#amount" ).val($amount);
     $( "#amount-label" ).text($amount);
     $( "#duration" ).val($duration);
     $( "#duration-label" ).text($duration);
     $( "#total" ).val($total);
     $( "#total-label" ).text($total);

     $('#slider a').html('<label><span class="glyphicon glyphicon-chevron-left"></span> '+$amount+' <span class="glyphicon glyphicon-chevron-right"></span></label>');
     $('#slider2 a').html('<label><span class="glyphicon glyphicon-chevron- left"></span> '+$duration+' <span class="glyphicon glyphicon-chevron-right">    </span></label>');
  }

更改价格格式 - Bootstrap价格滑块

2 个答案: