jQuery的：用鼠标按下事件

我试图改变输入的数值范围内连续变化的输入值范围内连续使用，直到上的一个按钮jQuery的：用鼠标按下事件

代码我试图
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

预先感谢帮助

来源

2015-10-15 Dinesh

所以，如果我理解正确的话，你要动态地改变最大输入范围在'' – Simplicity

http://stackoverflow.com/questions/4961072/jquery-continuous-mousedown –

TBH它不是100％清晰 - 问题和代码相互矛盾。你的意思是：当你点击'＃plus'时，范围会不断上升，直到你点击'＃minus'在这个点继续下去，直到你点击'＃plus'？或者你的意思是：当你把鼠标放在'＃plus'上时，它会上升，当你在'#minus'上按住鼠标时它会下降？第二个似乎更可能。 –

您的问题是触发事件只是一次...你应该什么做的是要确保（直到事件继续）您的代码被定期执行。所以一个想法可以是使用setTinterval()函数在“mousedown”事件上启动一个周期性定时器，并在clearInterval()的“mouseup”事件中停止它。在我的示例中，我删除了一个interval“全局”变量。在设置间隔之前，我也只执行了一次该功能，另一方面在点击它时没有执行。

希望它有帮助。

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/如果您愿意。

来源

2015-10-15 08:05:38

你需要编程的重复性质，所以你可以使用的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="-" />

来源

2015-10-15 08:17:32

http://jsfiddle.net/arunpjohny/wp1gvtzo/ –

很好的使用回调 –

jQuery的：用鼠标按下事件

回答

相关问题