使用Bootstrap和jquery来回切换按钮文本 [英] Switch button text back and forth with Bootstrap and jquery

问题描述

我有一个正在与引导程序一起使用的按钮.

I have a button I'm using with bootstrap.

我想每次点击来回翻转文本.因此，例如，按钮的默认文本为关"，单击它，现在显示为开".再次单击它，然后再次关闭"，依此类推. 以下是我的bootrap和jquery代码.我将如何更改它以满足我的需求?

I'd like to flip the text back and forth with each click. So for example the button' default text would be "Off", you click it, it now shows "On". Click it again and it's "Off" again and so on. Below is my bootrap and jquery code. How would I change this to meet my needs?

<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>

此外，我无法弄清楚我使用示例所看到的必须使用"autocomplete"参数来获取此错误.不知道它做什么.有人可以解释为什么我会收到此错误吗?

Also, I can't figure out whey I'm getting this error using the "autocomplete" parameter which the example I saw said I had to use. Not sure what it does. Can someone explain why I'm getting this error?

推荐答案

您可以将三元运算符用于条件检查以及每次单击时要交换的两个文本

You can use the ternary operator with condition check and the two texts that you want to swap on each click

工作片段:

$(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>

这篇关于使用Bootstrap和jquery来回切换按钮文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！