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

Question

我有两个图像，每个图像都包含在一个链接中。如果我按下鼠标超过一定时间，我想防止 colorbox 触发。我注意到 colorbox 仅在鼠标松开时触发。

我一直在尝试是将 setTimeout 函数与计时器一起使用，然后从该图像中删除颜色框，并在 mouseup 上“重新附加”颜色框到该图像，这样如果 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"??

这是一个 fiddle :http://jsfiddle.net/mydCn/

我遇到的问题是 $.colorbox.remove(); (或者我的尝试 this_colorbox.colorbox.remove();)从所有元素中删除 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();
        }
    });
});​