画布范围内的奇怪错误答案

【问题标题】：weird bug with ranges over canvases画布范围内的奇怪错误
【发布时间】：2014-05-20 16:19:09
【问题描述】：

无论如何，滑块都有一个系统，因此顶部阴影永远不会比底部更暗。但是当你向上拖动任何范围时，值为 10，滑块的行为很奇怪，我不明白为什么。（范围隐藏在画布的一侧）如果你们中的任何人看到问题，不知道吗？

谢谢

   <input type="range" class="vs1 vs" min="0" max="45" style="left:-89px;top:-12px" id="vs1" />
    <input type="range" class="vs2 vs" min="0" max="45" style="right:-89px;top:-12px" id="vs2" />
    <style>
input {
    font-weight:bold;
    font-family:arial;
    outline:none;
}
input[type=range].vs {
    -webkit-appearance: none;
    background: none;
    width: 200px;
    height:28px;
    -webkit-transform:rotate(90deg);
    margin-top: 97px;
    z-index: 10;
    position: absolute;
    border:1px solid rgba(0, 0, 0, 0);
    opacity:0.4;
    transition-duration: 1s;
}
input[type="range"].vs1::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: black;
    width: 5px;
    height: 15px;
    border-top-right-radius:2em;
    border-top-left-radius:2em;
    position: relative;
    top: 6px;
}
input[type="range"].vs2::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: black;
    width: 5px;
    height: 15px;
    border-bottom-right-radius:2em;
    border-bottom-left-radius:2em;
    position: relative;
    bottom: 7px;
}
input[type=range]:hover.vs {
    background: -webkit-gradient(linear, left top, right top, color-stop(100%, #ffcb93), color-stop(73%, #ffd8af), color-stop(0%, #ffffff));
    border:1px solid black;
    opacity:1;
}
input[type=range]:active.vs {
    background: -webkit-gradient(linear, left top, right top, color-stop(100%, #ffcb93), color-stop(73%, #ffd8af), color-stop(0%, #ffffff));
    border:1px solid black;
    opacity:1;
}
</style>

【问题讨论】：

当您说“向上拖动任何范围”时，您能否提供更多有关您所指的用户交互的详细信息？或者“行为怪异”是什么意思，让读者知道他猜对了吗？还有什么是“wondrin”？

标签： javascript jquery css input range

【解决方案1】：

你把它标记为 jQuery，所以我通过实际使用 jQuery 来减少和简化它：

if (~~$('#vs1').val() > ~~$('#vs2').val()) {
    if (qwas == 1) $('#vs2').val($('#vs1').val())
    if (qwas == 2) $('#vs1').val($('#vs2').val())
}

jSFiddle: http://jsfiddle.net/TrueBlueAussie/ZYX8Y/3/

注意：~~ 将值转换为整数（包括字符串）。比 parseInt() 更简单、更快

另一个注意事项：起初我设法轻松地破坏了您的代码，因为嵌套的 ifs 上没有大括号......对于代码维护来说真的很糟糕。

【讨论】：

+1 缺少大括号。此外，他对分号和缩进的看法不一致，这些都是对可维护代码很重要的样式特征。

【解决方案2】：

您不应该直接比较字符串。 value 属性为您提供字符串。所以"1" 和"10" 不要像你想的那样比较。

要解决您的问题，请使用：

parseInt(obj.value, 10)

其中obj 是您使用document.getElementById() 获得的DOM 元素。

在任何地方使用它，在if() 和get 和set 的作业中。

【讨论】：