Как назначить события jQuery-клика для третьего клика? - PullRequest
Новая
       11

Как назначить события jQuery-клика для третьего клика?

1 голос
/ 12 августа 2010

Я пытаюсь найти простой способ прикрепить события щелчка к элементу, что довольно просто для событий 1-го и 2-го щелчка. Но я пытаюсь выполнить переключение из трех щелчков.

1-й клик = addClas ('one'); 2-й клик = removeClass ('one'). AddClass ('two'); 3-й клик = removeClass ('two'). AddClass ('three'); следующий клик будет == 1-й клик и снова через цикл ..

Я использую простой div и применяю стилизацию с помощью CSS, чтобы изменить положение фона элементов - все довольно типично и просто ... и это просто для события toggle () или click () ... но я могу не пойму на всю жизнь, как справиться с 3-м щелчком! : D

вот моя разметка, например:

Любая помощь очень ценится!

UPDATE: У меня есть кое-что, что работает ... но, ИМХО, это уродливо и грязно ... должен быть более чистый, более краткий способ сделать это: $ ( "Tri_switch"). Нажмите (функция () { 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); });

Ответы [ 3 ]

5 голосов
/ 12 августа 2010

Yup @Codler, toggle () может принимать больше двух параметров по умолчанию. Просто добавьте третий параметр: 

$('#element').toggle(function(){
  $(this).addClass('one');
},
function(){
  $(this).removeClass('one').addClass('two');
},
function(){
  $(this).removeClass('two').addClass('three');
});
1 голос
/ 12 августа 2010 
var counter = 0;
$(".button").bind("click",function(){
    counter++;
    switch(counter){
        case 1:
            doSomething();
            break;
        case 2:
            doSomething2();
            break;
        case3:
            doSomething(3);
            counter=0;
            break;
    }
})

это то, что вы ищете?

0 голосов
/ 08 апреля 2019

Только что реализовал что-то на 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');
    }
});
...