我正在尝试找到一种将点击事件附加到元素的简单方法,这对于第一次和第二次点击事件来说非常容易。但是,我想要完成的是三次单击切换。
第一次点击= addClas('one');第二次点击= removeClass('one')。addClass('two');第三次点击= removeClass('two')。addClass('three');下一次单击将==第一次单击并再次循环...
我正在使用一个简单的div并通过CSS应用样式,以更改元素背景位置 - 所有非常典型和容易..并且是为toggle()或click()事件做的蛋糕..但我无法想象为我的生活如何处理第3次点击! :d
这是我的标记,例如:
任何帮助是极大的赞赏 !!
更新:我有一些有用的东西..但是,恕我直言,这是丑陋和混乱..必须有一个更清洁,更简洁的方式:$(“。tri_switch”)。click(function(){var this_id = $(this).attr(“id”);
if( $(this).hasClass("one") ){
$("input#user_"+this_id).attr('checked','checked');
$("input.tri_switch_radio").not("#user_"+this_id).removeAttr('checked');
$(this).removeClass('one').addClass('two');
$("span.tri_switch_checked").text('User');
}
else if ( $(this).hasClass("two") ){
$("input#admin_"+this_id).attr('checked','checked');
$("input.tri_switch_radio").not("#admin_"+this_id).removeAttr('checked');
$(this).removeClass('two').addClass('three');
$("span.tri_switch_checked").text('Admin');
}
else if ( $(this).hasClass("three") ){
$("input#readonly_"+this_id).attr('checked','checked');
$("input.tri_switch_radio").not("#readonly_"+this_id).removeAttr('checked');
$(this).removeClass('three').addClass('one');
$("span.tri_switch_checked").text('Readonly');
}
// alert(this_id); });
Yup @Codler,toggle()可以使用超过默认的两个参数。只需输入第三个参数:
$('#element').toggle(function(){
$(this).addClass('one');
},
function(){
$(this).removeClass('one').addClass('two');
},
function(){
$(this).removeClass('two').addClass('three');
});
var counter = 0;
$(".button").bind("click",function(){
counter++;
switch(counter){
case 1:
doSomething();
break;
case 2:
doSomething2();
break;
case3:
doSomething(3);
counter=0;
break;
}
})
这是你在找什么?
刚在J QUERY上实现了一些东西。您可以修改此代码以满足您的需求。
(function($)
{ var defaults = {
threshold: 1000, // ms
}
function tripleHandler(event)
{
var $elem = jQuery(this);
settings = jQuery.extend({}, defaults, event.data);
var clicks = $elem.data("triclick_clicks") || 0;
var start = $elem.data("triclick_start") || 0;
if (clicks === 0) { start = event.timeStamp; }
if (start != 0
&& event.timeStamp > start + settings.threshold)
{
clicks = 0;
start = event.timeStamp;
}
clicks += 1;
if (clicks === 3)
{
clicks = 0;
start = 0;
event.type = "tripleclick";
if (jQuery.event.handle === undefined) {
jQuery.event.dispatch.apply(this, arguments);
}
else {
jQuery.event.handle.apply(this, arguments);
}
}
$elem.data("triclick_clicks", clicks);
$elem.data("triclick_start", start);
}
var tripleclick = $.event.special.tripleclick =
{
setup: function(data, namespaces)
{
$(this).bind("touchstart click.triple", data, tripleHandler);
},
teardown: function(namespaces)
{
$(this).unbind("touchstart click.triple", tripleHandler);
}
};
})(jQuery);
$("#password").on("tripleclick", function() {
//console.log('Tripple clicked password');
if ('password' == $('#password').attr('type')) {
$('#password').prop('type', 'text');
} else {
$('#password').prop('type', 'password');
}
});