Javascript 如何在AJAX处理后切换显示的图像？

我想在AJAX请求完成后从显示的图像切换到另一个图像

以下是AJAX调用的代码：

<script type="text/javascript">
$(document).ready(function(){
$('.item').click(function(){
    var $id = $(this).attr('data-id');
    $.ajax({
            type: "POST",
            url: "test.php",
            data: { id: $id },
            success: //
          })
    });
});
</script>

$（文档）.ready（函数（）{
$（'.item'）。单击（函数（）{
var$id=$（this.attr（'data-id'）；
$.ajax({
类型：“POST”，
url:“test.php”，
数据：{id:$id}，
成功：//
})
});
});

以下是HTML：

<div class="item" data-id="1"><img src="image1.png" /></div>

如果显示了

image1.png

，我想改为显示

image2.png

如果显示了

image2.png

，我想改为显示

image1.png

---

请帮助我填写AJAX过程中的

成功部分。
希望这有帮助。如果需要，我们可以使用toggle jquery函数在这两个图像之间切换



$（文档）.ready（函数（）{
$（'.item'）。单击（函数（）{
var$id=$（this.attr（'data-id'）；
变量$imgId=$（'.item img'）.attr（'src'）；
$.ajax({
类型：“POST”，
url:“test.php”，
数据：{id:$id，ImageId:$imgId}，
成功：功能（数据）{
如果（ImageId='image1.png'）{
$（this.attr（'src'，'image2.png'）；
}
否则{
$（this.attr（'src'，'image1.png'）；
}
}
})
});
});
您可以使用该方法查找图像子级，然后获取并设置src属性的属性

因此，在调用AJAX之前，请查找图像：

var image = $(this).find('img');

然后在success函数中，检查src属性，并使用以下命令进行设置：

请参见下面的示例中演示的内容：


var url=[
"https://i.stack.imgur.com/C92ci.png?s=32&g=1“，//image1.png
"https://www.gravatar.com/avatar/8911010cdec4bb9d56b83b6bbbb1f341?s=32&d=identicon&r=PG"
];
$（文档）.ready（函数（）{
//演示容器-用于AJAX请求响应
var questionsContainer=$（“#问题”）；
$（'.item'）。单击（函数（）{
var$id=$（this.attr（'data-id'）；
var image=$（this.find（'img'）；
$.ajax({
url:“https://api.stackexchange.com/2.2/questions?order=desc&sort=activity&site=stackoverflow",
成功：功能（数据）{
var index=url.indexOf（image.attr（'src'）；
image.attr（'src'，url[Math.abs（index-1）]；
/*if（image.attr（'src'）==URL[0]）{
attr（'src'，url[1]）；
}否则{
attr（'src'，url[0]）；
}*/
questionsContainer.html（“#个问题：”+data.items.length）；
}
});
questionsContainer.html（“…”）；
});
});

单击图像加载问题#
我需要
$id
和
数据id
，以用于PHP脚本中的其他用途（数据库插入/更新）。图像的类别始终为
项
。有没有办法在成功部分对这个简单的条件进行编码<代码>如果[image1.png=display]，则[display image2.png]否则[display image1.png]
是。我想我们无法检查img1是否在成功功能中显示。我们只能检查它是否是img1。我们会像你所说的那样尝试处理它，给我几分钟。我尝试做的是Instagram或twitter上的心脏图标：用户可以点击它来喜欢或不喜欢帖子。除了单击后不会更改的图标外，一切正常。每次单击后我都会重新加载页面（并要求数据库知道要显示哪个图标），但我不喜欢这种解决方案……您只需要更改图标的颜色，对吗？为什么不使用css来实现这一点，而不是做所有这些？无论如何，更新了我的代码，如果你有任何问题，请告诉我。不，有两个不同的图标（对于其他一些项目，图标将完全不同）。关于代码的最后一次更新，它不起作用，因为
数据：{id:$id}
消失了。我可以这样做：
数据：{id:$id，$id:imgId}
？
success: function(data) {
    if (image.attr('src') == 'image1.png') {
      image.attr('src', 'image2.png');
    } else {
      image.attr('src', 'image1.png');
    }
}