JQuery:按间隔减少mousedown选择输入的值，在mouseup时重置

JQuery: Decrease value of mousedown selected input in intervals, reset on mouseup

本文关键字：mouseup 输入 选择 mousedown JQuery      更新时间：2023-09-26

我这里有一个有趣的。

我有几个div包含隐藏的输入值。我希望用户能够在其中一个DIV上"鼠标向下"，JQuery将获得该特定DIV内输入的"id"(将是block-1, block-2, block-3等)。

这些是div 

<div class="block" id="1"><input id="block-1" value="3" type="hidden"></div>
<div class="block" id="2"><input id="block-2" value="3" type="hidden"></div>
<div class="block" id="3"><input id="block-3" value="3" type="hidden"></div>

现在JQuery得到了正确的输入id，我想每200毫秒减少1个值，或者只要mousedown仍然处于活动状态。但是如果用户释放(mouseup)，那么该值将重置为原始值(在本例中为3)。

如果你想知道为什么我想要这个，我原来的计划是让选定的DIV改变颜色或内容作为值减少。但是，如果该值最终为0，则DIV将被隐藏。

我试图从这个工作，但我一直被难住。

您可以使用setInterval代替setTimeout。

JS 

$("input").mousedown(function(e) {
    var self = $(this);
    clearInterval(this.downTimer);
    this.downTimer = setInterval(function() {
      self.val(self.val() - 1);
    }, 200);
}).mouseup(function(e) {
    clearInterval(this.downTimer);
    var val = $(this).prop("defaultValue");
    $(this).val(val);
});

小提琴

注意:在示例中，我使用type=text而不是type=hidden，因此可以在测试中看到

相关文章：