Question

// DOM代码

echo "<div class='loadmorebutton'>";
          echo "<div class='loadmore'>";
            echo "<img class='loadmoreimage' src='loadmore.gif'/>";
          echo "</div>";
echo "</div>";

// ajax

$(document).on( 'click', '.loadmorebutton', function() {
      $(this).parent().find(".loadmore").show();
        $.ajax({
          type: "post",
          url: "some.php",
          data: somevariable,
          dataType: "text",                  
          success: function(data) {        
            $(this).parent().find(".loadmore").hide();
          }
      });
    });

Loadmore类设置为display：none;

以上ajax用于从php文件中获取数据。现在，当我点击loadmorebutton时，它会显示包含加载gif的loadmore类，当它获取数据时，它应该隐藏loadmore类，导致隐藏gif但loadmore类不会隐藏，并且在第一次单击后总是显示在屏幕上。

我该怎么做？

Answer 1

试试这个：

$(document).on( 'click', '.loadmorebutton', function() {
    $(this).parent().find(".loadmore").show();
    $.ajax({
        type: "post",
        url: "some.php",
        data: somevariable,
        dataType: "text",                  
        success: function(data) {        
            $(this).parent().find(".loadmore").hide();
        }.bind(this)
    });
});

您将在此上下文中获取ajax对象。需要使用.bind(this)
覆盖此上下文

Answer 2

$(document).on( 'click', '.loadmorebutton', function() {
    var loadGif = $(this).parent().find(".loadmore").show();
    $.ajax({
      type: "post",
      url: "some.php",
      data: somevariable,
      dataType: "text",                  
      success: function(data) {        
        loadGif.hide();
      }
  });
});

加载更多gif无法正常运行

2 个答案: