-1

在过去的几天里，我一直试图找出这个半特定的问题，我真的可以用另一双眼睛来解决它。

我的目标是在页面上有一个图像。它以静态 png 开始，当它被点击时，它会换成 .gif 并播放动画。当它再次点击时，它会再次交换并播放第二个 .gif 动画。它第三次做同样的事情。单击第 3 个 .gif 时，它会再次播放第 1 个 gif 动画，并重新开始该过程。

我的问题是页面上加载了多个图像，有些总共有 3 个 gif 动画，有些有 2 个，有些只有一个。

所以我要做的是在加载下一个之前检查 .gifs 是否存在。

这是我的一些符号的摘录...

$('#postContainer img').click(function () {            
    imgSrc = $(this).attr('src');    
    if(imgSrc.indexOf('_B.png') != -1){
        imgSrcToUse = imgSrc.replace('_B.png', '_pt1.gif');
        $(this).attr('src', imgSrcToUse);
        return false;
    }

上面的代码在单击图像时运行。它找到图像 src，并用第一个动画 gif 替换静态 png。所有图像都有动画 gif，所以这不是问题。

if (imgSrc.indexOf('_pt1.gif') != -1) {
    var POS2 = imgSrc.replace('_pt1.gif', '_pt2.gif');
    $.ajax({
        url: POS2,
        type: 'HEAD',
        error: function() {
            alert('error');
            imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt1.gif');
        },
        success: function() {
            alert('success');
            imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt2.gif');
        }
    });        

    $(this).attr('src', imgSrcToUse);
    return false;
}

加载完成后_pt1，下次点击时该函数运行。它应该检查a是否_pt2存在，如果存在，则将pt1换成pt2。但是，它似乎只在第二次点击时起作用。如果我单击它一次，它会_pt1再次加载，然后第二次将_pt2正确加载。这是我的主要问题所在......

如果这很复杂，我很抱歉，但我真的很难过。如果你们太困惑了，我会尽力把事情弄清楚。

4

1 回答 1

1

这是您的问题：

   $.ajax({
        url:POS2,
        type:'HEAD',
        error: function()
        {
            alert('error');
            imgSrcToUse = imgSrc.replace('_pt1.gif','_pt1.gif');
        },
        success: function()
        {
            alert('success');
            imgSrcToUse = imgSrc.replace('_pt1.gif','_pt2.gif');
        }
    });     

    $(this).attr('src',imgSrcToUse);

最后一行代码正在尝试使用您的 variable imgSrcToUse，它还不包含您的 AJAX 查询的结果。AJAX是异步的，因此您的$.ajax调用会在调用成功（或错误）回调之前返回并移至下一行。您可以通过使用回调中的数据将代码移动到回调中来解决此问题：

var $that = $(this);
$.ajax({
    url: POS2,
    type: 'HEAD',
    error: function () {
        alert('error');
        var imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt1.gif');

        $that.attr('src', imgSrcToUse);
    },
    success: function () {
        alert('success');
        var imgSrcToUse = imgSrc.replace('_pt1.gif', '_pt2.gif');

        $that.attr('src', imgSrcToUse);
    }
});

您在第二次调用中看到成功，因为您将下一个图像名称分配给全局变量。你应该使用var来避免这种情况。

于 2013-01-18T17:47:24.600 回答