Question

我正在构建一个使用＆＃34; snap来增加的表单＆＃34; JQuery UI滑块： https://jqueryui.com/slider/#steps

这是我目前的代码：

<script>
$(function() {
  $( "#slider" ).slider({
    value:100,
    min: 2501,
    max: 50000,
    step: 500,
    slide: function( event, ui ) {
      $( "#LoanAmount" ).val( '$' + addCommas(ui.value) );
    }
  });
  $( "#LoanAmount" ).val( "$" + $( "#slider" ).slider( "value" ) );

  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;
  }
});
</script>

我的第一个问题是代码仅在使用滑块后显示值的逗号，而不是在页面加载时显示。页面加载最小值$ 2501而不是$ 2,501

我的第二个问题是，出于合规性原因，我需要最低金额为2,501美元而不是2,500美元，但我仍然希望步数增量显示在偶数500上。我需要它是这样的：$ 2,501＆gt; $ 3,000＆gt; $ 3,500＆gt; $ 4,000＆gt; 4,500美元，直到它完成50,000美元。

任何帮助将不胜感激。谢谢！

Answer 1

如果您只是操纵幻灯片事件中的值，如下所示：

$(function() {
  $( "#slider" ).slider({
      value:100,
      min: 2501,
      max: 50001,
      step: 500,
      slide: function (event, ui) {
        var x = Number(ui.value);
        if (x > 2501) {
            x = x - (x % 500);
        }
        $("#LoanAmount").val('$' + addCommas(x));
      }
    });
        $("#LoanAmount").val( '$' + addCommas($("#slider").slider("value") ) );

  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以获取示例：https://jsfiddle.net/bpursley/u1nLma3x/7/

Answer 2

首先，这是一个简单的方法来为文本添加逗号，而不是100％确定它是否支持所有浏览者，尽管如此谨慎使用

textvalue = Number(nStr).toLocaleString('en',{minimumFractionDigits: 0 });

对于你的第一个问题，请执行此操作

$( "#LoanAmount" ).val( "$" + $( "#slider" ).slider( "value" ) );

应该是

$( "#LoanAmount" ).val( "$" + addCommas($( "#slider" ).slider( "value" )) );

至于第二个问题，一个简单的黑客将起始值设置为2501，然后在你的幻灯片功能中执行此操作

slide: function( event, ui ) {
  var val = ui.value
  if(val === 2500){
     val = 2501
  }
  else{
     val = val / 10
     val = Math.round(val)
     val = val * 10 
  }

  $( "#LoanAmount" ).val( '$' + addCommas(val) );
}

我认为这会有效，基本上你会检查价值是否为2500，然后你将它设置为2501，但是你必须确保当你再次回到500偶数时

编辑

修复了代码

的错误

jQuery UI Slider自定义步骤增量和逗号加载

2 个答案: