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应该只返回一个元素。

尝试使用类名，更正确，添加另一个类，例如'loadable'就可以了：

<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);
 });

HTML加载状态仅适用于一个按钮

2 个答案: