javascript - AJAX处理后如何切换显示的图像？

Question

我想在 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>

这是 HTML:

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

如果显示image1.png，我想显示image2.png。

如果显示image2.png，我想显示image1.png。

请帮我填写 AJAX 过程中的 success 部分。

Answer 1

您可以使用 .find()方法找到图像 child ，然后 .attr()获取和设置 src 属性的属性。

所以在 AJAX 调用之前，找到图像:

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

然后在 success 函数中，检查 src 属性并使用 attr() 设置它:

success: function(data) {
    if (image.attr('src') == 'image1.png') {
      image.attr('src', 'image2.png');
    } else {
      image.attr('src', 'image1.png');
    }
}

请看下面的例子:

var urls = [
  "/image/C92ci.png?s=32&g=1", //image1.png
  "https://www.gravatar.com/avatar/8911010cdec4bb9d56b83b6bbbb1f341?s=32&d=identicon&r=PG"
];
$(document).ready(function() {
  //demonstration container- for AJAX request response
  var questionsContainer = $('#questions');
  $('.item').click(function() {
    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",
      success: function(data) {
        var index = urls.indexOf(image.attr('src'));
        image.attr('src', urls[Math.abs(index-1)]);
        /*if (image.attr('src') == urls[0]) {
          image.attr('src', urls[1]);
        } else {
          image.attr('src', urls[0]);
        }*/
        questionsContainer.html('# of Questions: ' + data.items.length);
      }
    });
    questionsContainer.html('...');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" data-id="1"><img src="https://www.gravatar.com/avatar/8911010cdec4bb9d56b83b6bbbb1f341?s=32&d=identicon&r=PG" /></div>
<div id="questions">Click the image to load # of questions</div>