jQuery切换文本？

有谁知道如何使用jQuery切换文本的锚文本标签的HTML文本。 我想要一个锚点，当点击时，文本在“显示背景”和“显示文本”以及淡入淡出另一个div之间交替。 这是我最好的猜测：

$(function() { $("#show-background").click(function () { $("#content-area").animate({opacity: 'toggle'}, 'slow'); }); $("#show-background").toggle(function (){ $(this).text("Show Background") .stop(); }, function(){ $(this).text("Show Text") .stop(); }); }); 

提前致谢。

Answer 1

 $(function() { $("#show-background").click(function () { $("#content-area").animate({opacity: 'toggle'}, 'slow'); }); var text = $('#show-background').text(); $('#show-background').text( text == "Show Background" ? "Show Text" : "Show Background"); }); 

切换隐藏或显示元素。 您可以通过使用2个链接进行切换并在单击时切换它们来达到相同的效果。

Answer 2

对不起，问题是我！ 这是不同步的，但这是因为我的HTML文本错误的方式。 在第一次点击我想要div淡出和文字说“显示文本”。

请问下次再检查一下！

我的代码现在是：

 $(function() { $("#show-background").toggle(function (){ $("#content-area").animate({opacity: '0'}, 'slow') $("#show-background").text("Show Text") .stop(); }, function(){ $("#content-area").animate({opacity: '1'}, 'slow') $("#show-background").text("Show Background") .stop(); }); }); 

再次感谢您的帮助！

Answer 3

改进和简化@Nate的答案：

 jQuery.fn.extend({ toggleText: function (a, b){ var that = this; if (that.text() != a && that.text() != b){ that.text(a); } else if (that.text() == a){ that.text(b); } else if (that.text() == b){ that.text(a); } return this; } }); 

用于：

 $("#YourElementId").toggleText('After', 'Before'); 

Answer 4

最美丽的答案是…扩展jQuery的这个function…

 $.fn.extend({ toggleText: function(a, b){ return this.text(this.text() == b ? a : b); } }); 

HTML：

 <button class="example"> Initial </button> 

使用：

 $(".example").toggleText('Initial', 'Secondary'); 

我使用了逻辑（x == b？a：b），以防初始HTML文本略有不同（额外的空格，句号等等），所以你永远不会得到预期的初始值

（也是为什么我故意在HTML例子中留下空格;-)

Meules [下面]引起我注意的HTML切换使用的另一种可能性是：

 $.fn.extend({ toggleHtml: function(a, b){ return this.html(this.html() == b ? a : b); } }); 

HTML：

 <div>John Doe was an unknown.<button id='readmore_john_doe'> Read More... </button></div> 

使用：

 $("readmore_john_doe").click($.toggleHtml( 'Read More...', 'Until they found his real name was <strong>Doe John</strong>.') ); 

（或类似的东西）

Answer 5

 jQuery.fn.extend({ toggleText: function (a, b){ var isClicked = false; var that = this; this.click(function (){ if (isClicked) { that.text(a); isClicked = false; } else { that.text(b); isClicked = true; } }); return this; } }); $('#someElement').toggleText("hello", "goodbye"); 

仅用于切换文本的JQuery扩展。

JSFiddle： http : //jsfiddle.net/NKuhV/

Answer 6

你为什么不把它们叠在一起::

 $("#clickedItem").click(function(){ $("#animatedItem").animate( // ); }).toggle( // <--- you just stack the toggle function here ... function(){ $(this).text( // ); }, function(){ $(this).text( // ); }); 

Answer 7

 var el = $('#someSelector'); el.text(el.text() == 'view more' ? 'view less' : 'view more'); 

Answer 8

使用html（）来切换HTML内容。 类似于fflyer05的代码：

 $.fn.extend({ toggleText:function(a,b){ if(this.html()==a){this.html(b)} else{this.html(a)} } }); 

用法：

 <a href="#" onclick='$(this).toggleText("<strong>I got toggled!</strong>","<u>Toggle me again!</u>")'><i>Toggle me!</i></a> 

小提琴： http : //jsfiddle.net/DmppM/

Answer 9

我写了我自己的toggleText的小扩展。 它可能派上用场。

小提琴： https ： //jsfiddle.net/b5u14L5o/

jQuery扩展：

 jQuery.fn.extend({ toggleText: function(stateOne, stateTwo) { return this.each(function() { stateTwo = stateTwo || ''; $(this).text() !== stateTwo && stateOne ? $(this).text(stateTwo) : $(this).text(stateOne); }); } }); 

用法：

 ... <button>Unknown</button> ... //------- BEGIN eg 1 ------- //Initial button text is: 'Unknown' $('button').on('click', function() { $(this).toggleText('Show', 'Hide'); // Hide, Show, Hide ... and so on. }); //------- END eg 1 ------- //------- BEGIN eg 2 ------- //Initial button text is: 'Unknown' $('button').on('click', function() { $(this).toggleText('Unknown', 'Hide'); // Hide, Unknown, Hide ... }); //------- END eg 2 ------- //------- BEGIN eg 3 ------- //Initial button text is: 'Unknown' $('button').on('click', function() { $(this).toggleText(); // Unknown, Unknown, Unknown ... }); //------- END eg3 ------- //------- BEGIN eg4 ------- //Initial button text is: 'Unknown' $('button').on('click', function() { $(this).toggleText('Show'); // '', Show, '' ... }); //------- END eg4 ------- 

Answer 10

从另一个问题修改我的答案，我会这样做：

 $(function() { $("#show-background").click(function () { var c = $("#content-area"); var o = (c.css('opacity') == 0) ? 1 : 0; var t = (o==1) ? 'Show Background' : 'Show Text'; c.animate({opacity: o}, 'slow'); $(this).text(t); }); }); 

Answer 11

用这个

 jQuery.fn.toggleText = function() { var altText = this.data("alt-text"); if (altText) { this.data("alt-text", this.html()); this.html(altText); } }; 

这是你如何起诉的

 jQuery.fn.toggleText = function() { var altText = this.data("alt-text"); if (altText) { this.data("alt-text", this.html()); this.html(altText); } }; $('[data-toggle="offcanvas"]').click(function () { $(this).toggleText(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <button data-toggle="offcanvas" data-alt-text="Close">Open</button> 

Answer 12

 $.fn.toggleText = function(a){ var ab = a.split(/\s+/); return this.each(function(){ this._txIdx = this._txIdx!=undefined ? ++this._txIdx : 0; this._txIdx = this._txIdx<ab.length ? this._txIdx : 0; $(this).text(ab[this._txIdx]); }); }; $('div').toggleText("Hello Word"); 

Answer 13

 <h2 id="changeText" class="mainText"> Main Text </h2> (function() { var mainText = $('.mainText').text(), altText = 'Alt Text'; $('#changeText').on('click', function(){ $(this).toggleClass('altText'); $('.mainText').text(mainText); $('.altText').text(altText); }); })(); 

Answer 14

也许我把问题简单化了，但这就是我所用的。

 $.fn.extend({ toggleText: function(a, b) { $.trim(this.html()) == a ? this.html(b) : this.html(a); } }); 

Answer 15

内特 – 威尔金斯的改进function：

 jQuery.fn.extend({ toggleText: function (a, b) { var toggle = false, that = this; this.on('click', function () { that.text((toggle = !toggle) ? b : a); }); return this; } }); 

HTML：

 <button class="button-toggle-text">Hello World</button> 

使用：

 $('.button-toggle-text').toggleText("Hello World", "Bye!"); 

Answer 16

在大多数情况下，你会有更复杂的行为绑定到你的点击事件。 例如，一个链接切换某些元素的可见性，在这种情况下，除了其他行为之外，还需要将链接文本从“显示详细信息”切换到“隐藏详细信息”。 在这种情况下，这将是一个首选的解决scheme：

 $.fn.extend({ toggleText: function (a, b){ if (this.text() == a){ this.text(b); } else { this.text(a) } } ); 

你可以这样使用它：

 $(document).on('click', '.toggle-details', function(e){ e.preventDefault(); //other things happening $(this).toggleText("Show Details", "Hide Details"); }); 

Answer 17

这不是非常干净和聪明的方式，但它很容易理解和使用somtimes – 它像奇数和偶数布尔类似于：

  var moreOrLess = 2; $('.Btn').on('click',function(){ if(moreOrLess % 2 == 0){ $(this).text('text1'); moreOrLess ++ ; }else{ $(this).text('more'); moreOrLess ++ ; } }); 

Answer 18

为什么不跟踪可点击锚本身上没有CSS规则的类的状态？

 $(function() { $("#show-background").click(function () { $("#content-area").animate({opacity: 'toggle'}, 'slow'); $("#show-background").toggleClass("clicked"); if ( $("#show-background").hasClass("clicked") ) { $(this).text("Show Text"); } else { $(this).text("Show Background"); } }); }); 

Answer 19

 var jPlayPause = $("#play-pause"); jPlayPause.text(jPlayPause.hasClass("playing") ? "play" : "pause"); jPlayPause.toggleClass("playing"); 

这是使用jQuery的toggleClass（）方法的一个想法。

假设你有一个id =“play-pause”的元素，你想在“play”和“pause”之间切换文本。