javascript - HTML 加载状态仅适用于一键

Question

我使用 Bootstrap，我想添加几个具有加载状态的按钮 - “效果”。但问题是加载状态只能使用一个按钮。谁能解释我为什么，也许给我看一个可行的例子？

HTML：

 <td>
   <input type="button" id="fat-btn" data-loading-text="Einschalten..." class="btn btn-success" onclick="l1_on();" value= "einschalten" />
   <input type="button" id="fat-btn" data-loading-text="Ausschalten..." class="btn btn-danger" onclick="l1_off();" value= "ausschalten" />
 </td>

JS：

 $('#fat-btn')
  .click(function () {
    var btn = $(this)
    btn.button('loading')
    setTimeout(function () {
      btn.button('reset')
    }, 3000)
  })

Answer 1

ID 应该只返回一个元素。

尝试使用类名，它更正确，添加另一个类，例如“可加载”就可以了：

<input type="button" id="fat-btn" data-loading-text="Einschalten..." class="loadable btn btn-success" onclick="l1_on();" value= "einschalten" />
   <input type="button" id="fat-btn" data-loading-text="Ausschalten..." class="loadable btn btn-danger" onclick="l1_off();" value= "ausschalten" />

 $('.btn.loadable')
      .click(function () {
        var btn = $(this)
        btn.button('loading')
        setTimeout(function () {
          btn.button('reset')
        }, 3000)
      });

我鼓励不要在文档上重复 ID 属性。

Answer 2

您可以使用以下btn类来执行此操作：

 $('.btn').click(function () {
     var btn = $(this);
     btn.button('loading');
     setTimeout(function () {
         btn.button('reset')
     }, 3000);
 });