仅从一个链接中删除colorbox(jQuery插件)功能,然后重新应用它

Question

我有两个图像,每个图像都包含在一个链接中.如果我被淹没超过一定时间,我想阻止彩盒​​射击.我注意到colorbox只在mouseup上发射.

我一直在尝试使用带有计时器的setTimeout函数,然后从该图像中删除colorbox,并在mouseup"reattach"colorbox上删除该图像,以便在没有发生setTimeout时再次触发它.

HTML:

<a class="colorbox" href="..."><img src="..." /></a>

<a class="colorbox" href="..."><img src="..." /></a>

JS:

$('a.colorbox').colorbox();

var timer;

$('a.colorbox').on('mousedown', function(e) {

    var this_colorbox = $(this);

    timer = setTimeout(function() {
        this_colorbox.colorbox.remove();//this doesn't work
    }, 1500);

}).on('mouseup', function(e) {

    clearTimeout(timer);

});?

//"Reattach colorbox"??

这是一个小提琴:http://jsfiddle.net/mydCn/

我遇到的问题是$ .colorbox.remove(); (或者我的尝试this_colorbox.colorbox.remove();)从所有元素中删除colorbox.我怎么能"重新连接colorbox"到那个图像而不是再次调用函数到每个元素(当有很多图像会影响性能时这样做,不？)？

Answer 1

我知道了!我只能添加和删除类.我会发布答案,以便对某人有所帮助.

http://jsfiddle.net/mydCn/1/

$('a.colorbox').colorbox();

var timer;
var time_completed = 0;

$('a.colorbox').each(function() {
    $(this).on('click', function(e) {
        if (time_completed === 0) {
            e.preventDefault();
            $(this).removeClass('colorbox cboxElement');
        } else if (time_completed == 1) {
            $(this).addClass('colorbox cboxElement');
            time_completed = 0;
        }
    });

    $(this).on('mousedown', function(e) {
        timer = setTimeout(function() {
            time_completed = 1;
        }, 500);
    }).on('mouseup', function(e) {
        clearTimeout(timer);
        if (time_completed == 1) {
            $(this).click();
        }
    });
});?