Question

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

但我有一些问题。正如您所看到的那样，只有第二次更新current_value变量的值时，您的按钮会多次按下。我做错了什么这也会引入一个问题，即无论何时按下＆＃34; less＆＃34; 按钮，然后按＆＃34; more＆＃34; 按钮， 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); 
});

谁能告诉我为什么会这样？

Answer 1

因为这个状态

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

当您达到100或0值时，您将无法更改输入值，因为它始终为return 0

试试

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

$('.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/

Answer 3

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

输入范围用按钮增加值

3 个答案: