Question

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

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

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

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

这是我的一些表示法的摘录......

$('#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后，下次单击时此功能运行。它应该检查_pt2是否存在，如果存在，则用pt2替换pt1。但是，它似乎只是在第二次点击时工作。如果我点击一次，它会再次加载_pt1，然后第二次通过它将正确加载_pt2。这是我的主要问题所在......

如果这令人费解，我道歉但我真的很难过。如果你们太困惑，我会尽力把事情搞清楚。

Answer 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);

最后一行代码试图使用你的变量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来避免这种情况。

使用/ jquery根据它们在服务器上的存在交换图像

1 个答案: