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

Question

我有一个按钮，我正在使用bootstrap。

我希望每次点击都来回翻转文字。例如按钮＆＃39;默认文本将是＆＃34;关闭＆＃34;，您单击它，它现在显示＆＃34;开＆＃34;。再次点击它即可＃34;关闭＆＃34;再一次等等。 下面是我的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>

此外，我无法弄清楚我是否因使用＆＃34;自动完成＆＃34;而导致此错误。我看到的例子我必须使用的参数。不知道它做了什么。有人可以解释为什么我会收到此错误吗？

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>