Javascript jQuery：使用mousedown事件连续更改输入范围的值

我正试图通过在按钮上单击鼠标，持续更改输入范围的值

我试过的代码
HTML

使用此代码，输入范围的值仅更改一次，但我的要求是一直更改该值，直到鼠标向下移动

---

提前感谢您的帮助

您的问题是事件只触发一次。。。您应该做的是确保（直到事件继续）定期执行代码。 所以，可以使用函数在“mousedown”事件上启动一个周期计时器，并在“mouseup”事件上使用一个函数停止它。 在我的示例中，我清除了一个

间隔

“全局”变量。 在设置时间间隔之前，我只执行了一次函数，否则单击它就不会执行

希望能有帮助

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="-" />

var区间；
$（'#plus'）。on（'mousedown'，function（）{
startTime（true）；//若要使用，请单击“还”
interval=setInterval（函数（）{startTime（true）；}，500）；
});
$（'#减'）。on（'mousedown'，function（）{
startTime（false）；//若要使用，请单击“还”
interval=setInterval（函数（）{startTime（false）；}，500）；
});
$（'.rangeMover'）。在（'mouseup'，function（）上{
间隔时间；
});
功能启动时间（plus）{
var oldvalue=parseInt（$（'#points'）.val（）；
如果（加上）{
$（'#points'）.val（oldvalue+5）.change（）；
}否则{
$（'#points'）.val（oldvalue-5）.change（）；
}
log（$（'#points'）.val（））；
}

也要注意HTML修改

---

PS：如果您愿意的话。

您需要对重复性进行编程，这样您就可以使用setInterval（）来完成类似的操作

$（文档）.ready（函数（）{
函数setRepeatedMouseDown（el，回调）{
无功定时器；
$（el）.on（'mousedown'，function（）{
回调（）；
定时器=设置间隔（回调，500）；
}).on（'mouseleave mouseup'，function（）{
清除间隔（计时器）；
});
}
setRepeatedMouseDown（“#plus”，函数（）{
$（'#points'）.val（函数（i，val）{
return+val+5；
}).change（）；
});
setRepeatedMouseDown（“#减号”，函数（）{
$（'#points'）.val（函数（i，val）{
return+val-5；
}).change（）；
});
});

因此，如果我理解正确，您希望动态更改
TBH上的最大输入范围，但这不是100%清楚-问题和代码相互矛盾。你的意思是：当你点击
#plus
时，范围一直在上升，直到你点击
#plus
，在这一点上它一直在下降，直到你点击
#plus
？或者你的意思是：当你按住鼠标在“#plus”

上时，它向上移动；当你按住鼠标在“#plus”上时，它向下移动？第二种可能性更大。你看到我在两小时前发布的工作回复了吗D

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

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="-" />