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');
    }
}

请参阅以下示例中演示的内容：

＆＃13;

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('...');
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

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

＆＃13;

<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>

＆＃13;

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

2 个答案: