Question

***编辑：找到解决方案。为遇到此问题的未来用户添加必要的内容。

我完全难以理解为什么我的JS可以通过单个整数使这个小部件倒计时，但是当它计数时它好像它连接到我的盒子末尾的“1”。

也许你马上可以发现它：

标记：

<input type="text" name="volume" id="delta" class="change" value="50" />

<input id="slider" type="range" min="0" max="100" step=".2" value="50" />

js here：

var timeout, tabMinus = $('#minus'), tabPlus = $('#plus');

//slider functionality
$('#slider').mouseup(function() {
    $('#delta').val($('#slider').val());
});

$('#delta').keyup(function() {
   $('#slider').val($('#delta').val());
});

//plus-minus tab functionality
tabMinus.mouseup(function() {
    $('#delta').val($('#slider').val() - 1);
    $('#slider').val($('#delta').val() - .2);
});

tabPlus.mouseup(function() {
    $('#delta').val($('#slider').val() + 1);
    $('#slider').val($('#delta').val() + .2);
    console.log($('#delta').val());
});

如果有一种方法可以看到LIVE更新，我拖动滚动条，而不是在鼠标上重新渲染，也可以获得奖励积分。

这是小提琴： https://jsfiddle.net/jnurbina/rvf8j6te/1/

Answer 1

<强> Updated fiddle

因为.val()返回字符串你应该解析它，例如使用parseInt()或parseFloat()：

//plus-minus tab functionality
tabMinus.mouseup(function() {
    $('#delta').val(parseInt($('#slider').val()) - 1);
    $('#slider').val(parseFloat($('#delta').val()) - .2);
});

tabPlus.mouseup(function() {
    $('#delta').val(parseInt($('#slider').val()) + 1);
    $('#slider').val(parseFloat($('#delta').val()) + .2);
});

原因它会倒计时但不会上升是二进制-运算符没有重载，它总是意味着减法。（有一个一元-运算符，但是带两个操作数的运算符 - 二进制运算符 - 总是减法运算符。因此JavaScript引擎将值强制转换为数字并执行减法。但是二进制+运算符被重载，它被定义为字符串（连接）和算术（加法）。当你给它字符串时，它会连接而不是添加，而不是像-那样强制执行。

输入范围值将倒计时但不会计数

1 个答案: