jQuery UI 滑块自定义步骤增量和加载时的逗号

jQuery UI Slider custom step increments and comma on load

本文关键字：加载 UI 自定义 jQuery      更新时间：2023-09-26

我正在构建一个使用"对齐增量"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 美元> 3,000 美元> 3,500 美元> 4,000 美元> 4,500 美元，直到它以 50,000 美元结束。

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

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

$(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/

首先，这里有一种在文本中添加逗号的简单方法，而不是 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 时

编辑

修复了代码错误

相关文章：