假设我有以下 jquery
$('h3').on('click', function(){
$('#test').css('width','+=10px');
});
但它可以随时点击。现在我只想点击一次或两次。我怎样才能做到这一点?
我已经用 css width += 演示了这个例子,但实际上我想为
点击我定义的时间==
编辑
下一个问题:好的,现在我有两个按钮,一个是 h3,另一个是 h4。
单击 h4 时,重置 h3 的时间,单击 h3 时重置 h4 的时间
$('h3').data('clickable',2).on('click.h3', function(){
this.clicks = !this.clicks?0:this.clicks++;
if(this.clicks < $(this).data('clickable'))
$('#test').css('width','+=10px');
else $(this).off('click.h3');
});
var cnt = 0;
$('h3').on('click', function () {
if (cnt != 2) {
$('#test').css('width', '+=10px');
cnt++;
}
});
或者,如果您希望它只点击一次,您可以使用 .one()
$('h3').one('click', function () {
$('#test').css('width', '+=10px');
});
更新
var h3cnt = 0;
var h4cnt = 0;
$('h3').on('click', function () {
if (h3cnt != 2) {
$('#test').css('width', '+=10px');
h3cnt++;
}
h4cnt =0;
});
$('h4').on('click', function () {
if (h4cnt != 2) {
$('#test').css('width', '-=10px');
h4cnt++;
}
h3cnt =0;
});
这将在点击 5 次后停止点击事件的运行......
var count = 5;
$('h3').on('click', function(){
count--;
if (count == 0) return;
$('#test').css('width','+=10px');
});
换个合适的就count
行了。
尝试:
(function() {
var countA = 3, // number of clicks that the h3 will work for
countB = 5; // number of clicks that the h4 will work for
$('h3').on('click', function(){
countB = 5; // reset count for h4
if (!countA) {return;}
countA--;
// do stuff
});
$('h4').on('click', function(){
countA = 3; // reset count for h3
if (!countB) {return;}
countB--;
// do stuff
});
})();
使用以下代码:
$('h3').attr('data-count', 1).on(
'click',
function()
{
var count = $(this).attr('data-count');
var maxClicks = 5;
count = parseInt(count, 10);
if(count >= maxClicks)
{
return
}
$('#test').css('width','+=10px');
$(this).attr('data-count', count + 1);
}
);
这里也是这个例子:
http://jsfiddle.net/merianos/sPKVr/
这是您更新的代码:
您可以在每次按下按钮时获取一个计数变量并增加计数,当计数达到指定数字时禁用按钮,简单