jquery - 使用 Bootstrap 和 jquery 来回切换按钮文本

Question

我有一个与 Bootstrap 一起使用的按钮。

我想在每次点击时来回翻转文本。例如，按钮的默认文本为“关闭”，您单击它，它现在显示“打开”。再次单击它，它会再次“关闭”，依此类推。下面是我的 bootrap 和 jquery 代码。我该如何改变它来满足我的需求？

<button type="button"  id="cmdLargeButton" data-complete-text="On" class="btn btn-primary btn-lg" autocomplete="off">Off</button>
 <script>
      $('#cmdLargeButton').on('click', function () {
          $(this).button('complete')
      })
</script>

此外，我无法弄清楚为什么我使用“自动完成”参数出现此错误，我看到的示例说我必须使用该参数。不知道它有什么作用。有人可以解释一下为什么我会收到此错误吗？

Answer 1

您可以使用三元运算符进行条件检查以及每次点击时要交换的两个文本

工作片段:

$(function(){
   $('#cmdLargeButton').on('click', function () {
      $(this).text($(this).text() == "Off" ? "On" : "Off");
   });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button"  id="cmdLargeButton" data-complete-text="On" class="btn btn-primary btn-lg" autocomplete="off">Off</button>