Ajax 요청으로 이미지 테두리 강조 표시

Question

먼저, 코드의 일부 시각화. 다음 이미지는 이고 동적으로는 jquery에서 생성 된입니다. 그들은 사용자의 요청에 따라 이루어진 것 :

<img id="i13133" src="someimage.jpg" /> 
<img id="i13232" src="someimage1.jpg" /> 
<img id="i14432" src="someimage2.jpg" /> 
<img id="i16432" src="someimage3.jpg" /> 
<img id="i18422" src="someimage4.jpg" /> 

내가 jQuery를 사용하여 15 초마다 반복 AJAX와 루프를 가지고 다음과 같은 코드가 포함되어 있습니다 :

참고 : 문은 아약스 루프 내에 있을지 어떨지를 판정합니다.

여기서 imgId은 Ajax 호출에서 요청한 ID입니다.

//Passes the IDs retrieved from Ajax, if the IDs exist on the page the animation is triggered. 
if ($('#i' + imgId).length) 
{ 

var pickimage = '#i' + imgId; 

var stop = false; 

function highlight(pickimage) { 
    $(pickimage).animate({color: "yellow"}, 1000, function() { 
     $(pickimage).animate({color: "black"}, 1000, function() { 
     if (!stop) highlight(pickimage); 
     }); 
    }); 
} 

// Start the loop 
highlight(pickimage); 

} 

여러 이미지가 있어도 훌륭하게 작동합니다. 그러나 나는 원래이 이미지를 하나의 이미지와 함께 사용했습니다.

문제는 인터럽트가 필요하다는 것입니다. 뭔가 같이 :

1) 이것은 분명히 모든 애니메이션을 중지 :

$(img).click(function() { 
    stop = true; 
}); 

두 가지 문제가있다. 내가 클릭 한 이미지의 애니메이션 만 멈추는 무언가를 쓸 수있는 방법에 대해 머리를 감쌀 수 없습니다.

2) Ajax는 ID를 검색합니다. ID가 몇 분에 한 번 이상 표시되기도합니다. 즉, 이미지가 있으면 서로 위에 반복하여 반복합니다. 애니메이션이 이미지에서 이미 실행되고 있는지 감지하는 방법을 알아 내고 이미지가 이미 트리거 된 경우 아무 작업도 수행하지 않아도됩니다.

1)는 stop 변수를 사용하지 마십시오)

Answer 1

당신은 하나의 돌로 두 마리를 칠 수있다. 각 img에 클래스를 추가하십시오.

// Instead of: var stop = false; 
$(pickimage).addClass("animating"); 

// Instead of: if (!stop) highlight(pickimage); 
if ($(pickimage).hasClass("animating")) highlight(pickimage); 

// Instead of: $(img).click(function() { stop = true; }); 
$(img).click(function() { $(this).removeClass("animating"); }); 

2) 같은 것을 확인하십시오!

if ($(pickimage).hasClass("animating")) return;