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();
        }
    });
});

仅从一个链接中删除colorbox（jQuery插件）功能，然后重新应用它

1 个答案: