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() 方法查找子图像，然后使用.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 = [
  "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"
];
$(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>

Answer 2

希望这会有所帮助。如果需要，我们可以使用切换 jquery 功能在这两个图像之间切换。

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