输入范围使用按钮添加值

input range add value with buttons

本文关键字：添加 按钮 范围 输入      更新时间：2023-09-26

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

但我对此有一些问题。如您所见，如果您仅在第二次更新我的current_value变量的值时多次按下 less 按钮。我做错了什么。这也引入了一个问题，即每当您按下"更少"按钮，然后按下"更多"按钮时，current_value也不会更新。

这是我的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值时，您将无法更改输入的值，因为它将始终return 0

试试吧 

$('.more, .less').click("on", function(e) {
  e.preventDefault();
  var current_value = parseInt($('input').val());
  var classname = $(this).attr("class");
  if (classname === "less") {
    if (current_value == 0)
      return;
    else {
      $('input').val(current_value - 10);
      $('#result').html("$" + (current_value - 10));
    }
  } else {
    if (current_value == 100)
      return;
    else {
      $('input').val(current_value + 10);
      $('#result').html("$" + (current_value + 10));
    }
  }
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="margin-top: 1em">
  <h2>Price</h2>
  <button class="less">
    less
  </button>
  <input id="price" type="range" min="0" max="100" step="5" value="50" />
  <button class="more">
    more
  </button>
</div>
<p id="result">$50</p>

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

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

小提琴显示这个工作：https://jsfiddle.net/1cmato26/3/

它似乎工作正常，除了一旦达到 0 或 100 它就不会更新值，因为您或多或少都有回报

相关文章：