Question

我正在尝试连续更改输入范围的值，直到按钮上的mousedown

我尝试过的代码 HTML

<input type="range" id="points" value="50" min="10" max="100" step="1" />
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />

的jQuery

$('#plus').on('mousedown', function() {
  oldvalue = parseInt($('#points').val());
  $('#points').val(oldvalue + 5).change();
  console.log($('#points').val());
  });

$('#minus').on('mousedown', function() {
  oldvalue = parseInt($('#points').val());
  $('#points').val(oldvalue -  5).change();
  console.log($('#points').val());
  });

jsfiddle

使用此代码值的输入范围只更改一次，但我的要求是不断更改值，直到mousedown

提前感谢您的帮助

Answer 1

你的问题是只触发一次事件......你应该做的是确保（直到事件继续）你的代码定期执行。所以一个想法可以是开始定期计时器＆＃34; mousedown＆＃34;使用setTinterval()函数的事件，并在＆＃34; mouseup＆＃34; clearInterval()的活动。在我的例子中，我发现了interval＆＃34;全球＆＃34;变量。我在设置间隔之前也执行了一次该功能，其他的点击它没有被执行。

希望它有所帮助。

var interval;

$('#plus').on('mousedown', function() {
    startTime(true); // to work on click also
  interval =  setInterval(function(){startTime(true);}, 500);
});

$('#minus').on('mousedown', function() {
    startTime(false); // to work on click also
  interval =  setInterval(function(){startTime(false);}, 500);
});

$('.rangeMover').on('mouseup', function() {
  clearInterval(interval);
});

function startTime(plus) {
    var oldvalue = parseInt($('#points').val());
    if (plus) {
        $('#points').val(oldvalue + 5).change();
    } else {
        $('#points').val(oldvalue -  5).change();
    }
      console.log($('#points').val());
}

<input type="range" id="points" value="50" min="10" max="100" step="1" />
<input type="button" id="plus" class="rangeMover" value="+" />
<input type="button" id="minus" class="rangeMover" value="-" />

也要注意HTML修改。

PS：http://jsfiddle.net/uu9o1vam/如果您愿意的话。

Answer 2

你需要编写重复的性质，所以你可以使用setInterval（）来做到这一点

$(document).ready(function() {
  function setRepeatedMouseDown(el, callback) {
    var timer;

    $(el).on('mousedown', function() {
      callback();
      timer = setInterval(callback, 500);
    }).on('mouseleave mouseup', function() {
      clearInterval(timer);
    });

  }

  setRepeatedMouseDown('#plus', function() {
    $('#points').val(function(i, val) {
      return +val + 5;
    }).change();
  });
  setRepeatedMouseDown('#minus', function() {
    $('#points').val(function(i, val) {
      return +val - 5;
    }).change();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="points" value="50" min="10" max="100" step="1" />
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />

jQuery：使用mousedown事件不断更改输入范围的值

2 个答案: