javascript - 使用 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 循环，它包含以下代码:

注意:if 语句在 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);

}

它工作得很好，即使有多个图像。但我最初只将它用于一张图片。

问题是我需要中断。像这样的东西:

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

有两个问题:

1.)这显然会停止所有动画。我无法理解如何编写仅停止单击图像的动画的东西。

2.)Ajax 检索 ID，有时这些 ID 每隔几分钟出现一次以上，这意味着如果图像存在，它会在彼此之上重复动画。我可以借助一些帮助来弄清楚如何检测动画是否已在图像上运行，如果动画已在图像上触发则什么也不做。

Answer 1

你可以用一 block 石头打两只鸟;)

1) 不要使用stop 变量。为每个 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;