4

私は2つの画像を持っており、それぞれがリンクでラップされています。一定時間マウスダウンした場合にカラーボックスが起動しないようにしたい。カラーボックスがマウスアップでのみ起動することに気づきました。

私が試しているのは、タイマーでsetTimeout関数を使用してから、その画像からカラーボックスを削除し、マウスアップでその画像にカラーボックスを「再アタッチ」して、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（）;）は、すべての要素からカラーボックスを削除します。すべての要素に対して関数を再度呼び出すのではなく、どうすればその画像に「カラーボックスを再アタッチ」できますか（画像がたくさんあるときにそうすると、パフォーマンスに影響しますね）。

4

1 に答える 1

5

わかった！クラスを追加したり削除したりするだけでできます。誰かに役立つかもしれないので、私は答えを公開します。

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();
        }
    });
});​
于 2012-08-15T00:06:12.143 に答える