输入范围值将向下计数而不是向上。

Question

输入范围值将向下计数而不是向上。

javascriptjqueryhtmlcss

4

***编辑：问题已解决。为了方便未来遇到相同问题的用户，添加必要内容。

我完全不知道为什么我的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：

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());
});

如果有办法在拖动滚动条时看到实时更新，而不是在鼠标放开后重新渲染，那就更好了。此外，这是一个关于编程的问题。

以下是fiddle链接： https://jsfiddle.net/jnurbina/rvf8j6te/1/

- Jason

你的问题相关的所有内容都应该在这里，即在本网站上，而不仅仅是链接。如果你确实需要链接到一个外部资源，请确保包含所有相关内容（包括代码使用的HTML）。但是，在这里很少有必要使用jsFiddle；相反，请使用Stack Snippets（即<>工具栏按钮）。 - T.J. Crowder

我注意到你的滑块是用 step="1" 定义的，所以我不确定添加/减去 .2 的目的是什么... - T.J. Crowder

1

是的，这是我第一次在这里发布，不太确定礼仪，所以只是粘贴了JS代码，如果您想查看标记或样式，可以单击fiddle。总之，感谢您的帮助，之前的步骤并不重要；现在已经更改为反映十进制增量/减量。 - Jason

1

建议将问题中的信息放在其中，即使已经回答过，也是为了未来读者的利益。 - T.J. Crowder

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zakaria Acharki · Accepted Answer

更新的代码片段

这是因为.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引擎将值强制转换为数字并执行减法运算。但是二进制运算符+被重载了，对于字符串（连接）和算术（加法）都有定义。当您给它字符串时，它进行的是连接而不是加法，在这方面与-不同，后者会进行强制转换。