Cómo asignar eventos de clic de jQuery para el tercer clic?
-
27-09-2019 - |
Pregunta
Estoy tratando de encontrar una forma sencilla de conectar eventos de clic a un elemento, que es bastante fácil para el 1º y 2º eventos de clic .. Pero, lo que estoy tratando de lograr es una de tres Haga clic en Alternar.
primera click = addClas ( 'uno');
Segundo click = removeClass ( 'uno') addClass ( 'dos');.
Tercero click = removeClass ( 'dos') addClass ( 'tres');.
clic siguiente sería == primero clic y a través del bucle de nuevo ..
Estoy usando un div simple y la aplicación de peinar a través de CSS, para cambiar la posición de los elementos de fondo - todos bastante típica y fácil .. y es un pastel a hacer por un conmutador () o evento Click () .. pero puedo 't figura hacia fuera para la vida de mí cómo manejar la tercera clic! : D
Aquí está mi marcado, por ejemplo propósitos:
<div class="tri-swtich" id="switch"></div>
Cualquier ayuda es muy apreciada !!
ACTUALIZACIÓN:
Tengo algo que funciona .. pero, en mi humilde opinión es feo y desordenado .. Tiene que haber una forma más limpia y concisa de hacer esto:
$(".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);
});
Solución
Sí @Codler, de palanca () puede tomar más que el defecto dos parámetros. Acaba de lanzar en el tercer parámetro:
$('#element').toggle(function(){
$(this).addClass('one');
},
function(){
$(this).removeClass('one').addClass('two');
},
function(){
$(this).removeClass('two').addClass('three');
});
Otros consejos
var counter = 0;
$(".button").bind("click",function(){
counter++;
switch(counter){
case 1:
doSomething();
break;
case 2:
doSomething2();
break;
case3:
doSomething(3);
counter=0;
break;
}
})
es lo que busca?
Sólo se aplicó algo en J CONSULTA. Puede modificar este código para adaptarse a sus necesidades.
(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');
}
});