Javascript 输入范围使用按钮添加值

您好，我有一个关于通过按钮操纵范围滑块的问题。我创建了两个按钮，一个减少值，另一个增加值，如图所示

但我有一些问题。如您所见，如果您只在my

current_value

变量的值第二次更新时多次按下less按钮。我做错了什么。这也带来了一个问题，即无论何时按下“更少”按钮，然后按下“更多”按钮，当前值也不会更新

这是我的JS代码：

$('.more, .less').click("on", function (e) {
  e.preventDefault();
  var current_value = parseInt($('input').val());
  if (current_value == 100 || current_value == 0) {
    return;
  }
  var classname = $(this).attr("class");
  if (classname === "less") {
    $('input').val(current_value-10);
  } else {
    $('input').val(current_value+10);
  }
  $('#result').html("$" + current_value); 
});

---

有谁能告诉我这是为什么吗？

因为这个国家

if(current_value == 100 || current_value == 0){
    return;
  }

当您达到

100

或

0

值时，您将无法更改输入值，因为它将始终

返回0

试试看

$（'.more，.less'）。单击（“on”，函数（e）{
e、 预防默认值（）；
var current_value=parseInt（$（'input'）.val（））；
var classname=$（this.attr（“类”）；
如果（类名==“更少”）{
如果（当前_值==0）
返回；
否则{
$（'input'）.val（当前值-10）；
$（'#result'）.html（“$”+（当前#u值-10））；
}
}否则{
如果（当前_值==100）
返回；
否则{
$（'input'）.val（当前值+10）；
$（'#result'）.html（“$”+（当前#u值+10））；
}
}
})

价格
较少的
更多
50美元

因为这个状态

if(current_value == 100 || current_value == 0){
    return;
  }

当您达到

100

或

0

值时，您将无法更改输入值，因为它将始终

返回0

试试看

$（'.more，.less'）。单击（“on”，函数（e）{
e、 预防默认值（）；
var current_value=parseInt（$（'input'）.val（））；
var classname=$（this.attr（“类”）；
如果（类名==“更少”）{
如果（当前_值==0）
返回；
否则{
$（'input'）.val（当前值-10）；
$（'#result'）.html（“$”+（当前#u值-10））；
}
}否则{
如果（当前_值==100）
返回；
否则{
$（'input'）.val（当前值+10）；
$（'#result'）.html（“$”+（当前#u值+10））；
}
}
})

价格
较少的
更多
$50

它似乎工作正常，除了当值达到0或100时它不会更新值这一事实之外，因为您有一个多或少的返回值

它似乎工作正常，除了当值达到0或100时它不会更新值这一事实之外，因为您有一个多或少的返回值

尝试使用单击和更改使滑块正常工作的处理程序：

$('.more,.less').click(function(){
    var value = parseInt($('#price').val());

    switch($(this).hasClass('more')){
      case true:
        value = value === 100 ? value : value +5;
        break;
      case false:
        value = value === 0 ? value : value -5;
        break;    
    }

    $('#price').val(value).trigger('change');
});

$('#price').change(function(e){
    e.preventDefault();
    var current_value = parseInt($('input').val());
    $('#result').html("$" + current_value); 
});

---

显示此工作状态的小提琴：

尝试使用单击和更改处理程序使滑块正常工作：

$('.more,.less').click(function(){
    var value = parseInt($('#price').val());

    switch($(this).hasClass('more')){
      case true:
        value = value === 100 ? value : value +5;
        break;
      case false:
        value = value === 0 ? value : value -5;
        break;    
    }

    $('#price').val(value).trigger('change');
});

$('#price').change(function(e){
    e.preventDefault();
    var current_value = parseInt($('input').val());
    $('#result').html("$" + current_value); 
});

---

Fiddle显示了这项工作：

我正在寻找的东西真是太棒了。也更有意义。谢谢，这正是我想要的。也更有意义。谢谢，我添加了一个答案，允许您在用户拖动滑块指针时捕获。我添加了一个答案，允许您在用户拖动滑块指针时捕获。