Jquery UI范围滑块 - 将数字转换为货币

时间:2013-09-24 21:06:17

标签: javascript jquery jquery-ui

我目前正在使用范围滑块,价格范围为£0到£2,000,000。目前,除了没有格式化为货币的价格之外,一切都正常工作(即500,000英镑的价值目前显示为500000英镑 - 没有逗号)。这是代码:

的jQuery

  /* SALES SLIDER */ 
  $( "#slider-range-price-sales" ).slider({
  range: true,
  min: 0,
  max: 2000000,
  step: 50000,
  values: [ 0, 2000000],
  slide: function( event, ui ) {
      $("#minPrice").val("£" + ui.values[0]).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "£1");
      $("#maxPrice").val("£" + ui.values[1]);
  }
});

$("#minPrice").val("£" + $("#slider-range-price-sales").slider("values", 0));
$("#maxPrice").val("£" + $("#slider-range-price-sales").slider("values", 1));

HTML

<div id="slider-range-price-sales"></div>

<div class="priceContainer">

   <div class="left"><input type="text" id="minPrice" name="minPrice" style="border: 0; color: #3D80E9; background:#F2F2F2; font-weight: bold;" /></div>
   <div class="right"><input type="text" id="maxPrice" name="maxPrice" style="border: 0; color: #3D80E9; background:#F2F2F2; font-weight: bold;" /></div>

</div>

http://jsfiddle.net/isherwood/RwfFH/

我尝试使用JavaScript重新格式化最低价格.replace无济于事。我们将非常感谢任何帮助或建议。

谢谢, 杰米

2 个答案:

答案 0 :(得分:3)

您可以使用此功能添加逗号

function addCommas(nStr){
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

和jsFiddle:http://jsfiddle.net/RwfFH/1/

答案 1 :(得分:3)

为了与你正在做的事情保持一致,你只需做一些改变。我要指出,在将其设置为.val()操作之前,您需要修改该值。此外,replace返回一个新的字符串,它不会修改原始字符串。这样做,你只需要在正则表达式中进行一些调整,$ 1,将使用替换中的匹配值。

$("#minPrice").val("£" + ui.values[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"));