javascript - 加载文件后更改按钮文本？

Question

我有一个名为“完全加载...”的按钮，我想要做的是，当我单击它时，将按钮文本更改为“正在加载...”，然后加载包含文件，仅在文件完全加载后，然后将按钮 css 设置为 display:none。我的JS代码是:

$(document).ready(function(){

  var change = document.getElementsByClassName(".load-completely");

  $(".load-completely").click(function(){

    if (change.innerHTML == "Load completely...") {

      change.innerHTML = "Loading...";

      $(".remaining").load('includes/LOAD.php');

      $('.load-completely').css("display", "none");

    }

  });

});

我的按钮代码是:

<div class="col-12 text-center">
  <button type="button" class="btn btn-sm load-completely">Load completely...</button>
</div>

<div class="remaining col-12"></div>

当我单击按钮时，它会正确加载文件，但不会更改之前的按钮文本，也不会隐藏按钮。

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 jQuery .load 的回调函数函数隐藏按钮。

您的代码存在一些问题:

通过类名获取元素时，类名前面不需要加点；参数应该只是类的名称。另外，document.getElementsByClassName返回具有所有给定类名的所有子元素的类似数组的对象，因此您需要使用 document.getElementsByClassName("load-completely")[0] 获取该类的第一个元素

$(document).ready(function(){

  var change = document.getElementsByClassName("load-completely")[0];

  $(".load-completely").click(function(){

    if (change.innerHTML == "Load completely...") {

      change.innerHTML = "Loading...";

      $(".remaining").load('https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName', function(){
           $('.load-completely').css("display", "none");
      });

    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-12 text-center">
  <button type="button" class="btn btn-sm load-completely">Load completely...</button>
</div>

<div class="remaining col-12"></div>