Question

我正在尝试编写一个函数，当用户单击“加号”或“减号”时，输入框仅使用整数更新，我需要手动添加逗号。

如果您点击减号，它首先会起作用，但再次点击它会将其渲染为NaN。如果我console.log这个值它会删除第一个逗号之后的所有字符，这可能没有多大意义，但看看小提琴以获得更好的例子......

JS

function addCommas(intNum) {
  return (intNum + '').replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}

$('#plus').on('click', function() {
    var value = $("#propertyValueSliderValue").val();
    $("#propertyValueSliderValue").val(addCommas(value));
 });

$('#minus').on('click', function() {
    var curVal = $("#propertyValueSliderValue").val();
    var val = 500;
    var newVal = curVal - val; 
    //newVal = newVal.replace(/,/g, "");

    alert( newVal );
    $("#propertyValueSliderValue").val(addCommas(newVal));
});

https://jsfiddle.net/5qhof0fq/1/

Answer 1

而不是减号函数中的$，

删除逗号，然后解析它。

var curVal = $("#propertyValueSliderValue").val();

Answer 2

问题是因为created_at意味着来自输入的值不能被强制转换为整数。在执行任何数学运算之前，您需要替换逗号：,

.replace(/,/g, '')

function addCommas(intNum) {
  return (intNum + '').replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}
$('#plus').on('click', function() {
  var value = $("#propertyValueSliderValue").val().replace(/,/g, '');
  $("#propertyValueSliderValue").val(addCommas(value));
});

$('#minus').on('click', function() {
  var curVal = $("#propertyValueSliderValue").val().replace(/,/g, '');
  var val = 500;
  var newVal = curVal - val;
  $("#propertyValueSliderValue").val(addCommas(newVal));
});

或者，您可以使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="custom-slider property-value"> <div class="slider-wrap"> <div id='minus'>-</div> <div id='plus'>+</div> </div> <div class="slider-value money"> <input class="s-value number" type="tel" id="propertyValueSliderValue" value="120000" /> </div> </div>属性来保存要在计算中使用的值，同时保持UI友好值的分离。您还可以使用其他数据属性来保存要在值中添加/删除的data，以便您可以干掉点击事件处理程序：

increment

function addCommas(intNum) {
  return (intNum + '').replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}

var $propertySliderValue = $("#propertyValueSliderValue");

$('.inc').on('click', function() {
  var value = $propertySliderValue.data('value') + $(this).data('inc');
  $propertySliderValue.val(addCommas(value)).data('value', value);
});

Answer 3

这是因为当你获得值#propertyValueSliderValue时，它是一个字符串：

将您的代码更改为：

$('#minus').on('click', function() {
  var curVal = $("#propertyValueSliderValue").val();
  var parseVal = parseInt(curVal);
  var val = 500;
  var newVal = parseVal - val; 
  //newVal = newVal.replace(/,/g, "");

  alert( newVal );
  $("#propertyValueSliderValue").val(addCommas(newVal));
});

Answer 4

这是因为你每次都从输入中读取值，技术上用逗号表示的数字不是javascript中的数字。你可以做的是创建一个变量来跟踪实数，只输出逗号版本给用户。

var value = parseInt($("#propertyValueSliderValue").val());
var interval = 500;

function addCommas(intNum) {
  return (intNum + '').replace(/(\d)(?=(\d{3})+$)/g, '$1,');
}
 
$('#plus').on('click', function() {
    value += interval; 
    var commaNotatedVal = addCommas(value);
    $("#propertyValueSliderValue").val(commaNotatedVal);
 });
              
$('#minus').on('click', function() {
    value -= interval; 
    var commaNotatedVal = addCommas(value);
    $("#propertyValueSliderValue").val(commaNotatedVal);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-slider property-value">
    		
    			<div class="slider-wrap">
    				<div id='minus'>-</div>
    				<div id='plus'>+</div>
    			</div>
    			<div class="slider-value money">
    				<input class="s-value number" type="tel" id="propertyValueSliderValue" value="120000" />
    			</div>
        	</div>

使用jQuery，NaN将数字添加到数字

4 个答案: