javascript - 加载更多 gif 无法正常运行

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文件中获取数据。现在，当我单击 loadmore 按钮时，它会显示包含加载 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)
    });
});

You will be getting ajax object in this context. Need to override this context using .bind(this)