Question

我有一个名为“ 完全加载... ”的按钮，我想做的是，当我单击该按钮时，将按钮文本更改为“ 正在加载... ”。 strong>”，然后加载包含文件，并且仅在文件完全加载后加载，然后将按钮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

几个问题：

调用document.getElementsByClassName()时，参数应仅是类，开头不应带点。
它返回一个集合，而不是单个元素，因此，如果您想对该元素做任何事情，则需要对其进行索引。
您正在立即隐藏加载程序，而不是等待.load()完成。您应该将其隐藏在.load()的回调函数中。

您可以通过使用jQuery而不是原始JS函数来解决前两个问题，或者可以使用document.querySelector()。

$(document).ready(function() {

  $(".load-completely").click(function() {
    if ($(this).html() == "Load completely...") {
      $(this).html("Loading...").show();
      $(".remaining").load('includes/LOAD.php', function() {
        $(".load-completely").html("Load completely...").hide();
      });
    }
  });
});

Answer 2

您可以将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>

Answer 3

jQuery的load()是异步的。这意味着后面的代码将立即运行，而不会等待它完成加载。

要解决此问题，请使用函数提供的回调在完成加载后运行代码：

$(".remaining").load('includes/LOAD.php', {}, function() {
  $('.load-completely').css("display", "none");
});

此外，@ Barmar是对的：您错误地访问了HTML元素。这应该起作用：

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

加载文件后更改按钮文字？

3 个答案: