하나의 링크에서만 colorbox (jQuery 플러그인) 기능을 제거한 다음 다시 적용하십시오.

Question

각 이미지가 링크로 묶여 있습니다. 내가 특정 시간 이상 mousedown했다면 colorbox가 발사되는 것을 막고 싶다. 나는 mouseup에서만 colorbox 화재를 발견했습니다.

내가 해왔 던 것은 타이머로 setTimeout 함수를 사용한 다음 해당 이미지에서 colorbox를 제거하고 mouseup에서 해당 이미지에 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()이다; (또는 시도 my_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(); 
     } 
    }); 
});​