如何使用jQuery切换锚标记的HTML文本？我想要一个锚点，当单击该文本时，它会在Show Background＆之间Show Text以及在另一个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();
});
});
Answers:
$(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个链接并在单击任意一个链接时对其进行切换来使用切换来达到相同的效果。
<a>标记文本（例如“显示文本”和“显示背景”）与锚定HTML一起保留的类似内容，而不是将其分离为jQuery代码，请参见stackoverflow.com/a/28500651/245602
最漂亮的答案是... 用此功能扩展jQuery ...
$.fn.extend({
toggleText: function(a, b){
return this.text(this.text() == b ? a : b);
}
});
HTML：
<button class="example"> Initial </button>
使用：
$(".example").toggleText('Initial', 'Secondary');
在初始HTML文本略有不同（额外的空格，句点等）的情况下，我使用了逻辑（x == b？a：b），因此您永远不会得到重复的预期初始值
（这也是为什么我故意在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>.')
);
（或类似的东西）
text到html和切换类，以将此功能用作更多/更少功能:)
对不起，问题是我！这是不同步的，但这是因为我将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();
});
});
再次感谢您的帮助！
改善和简化@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');
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/
你为什么不把它们叠起来::
$("#clickedItem").click(function(){
$("#animatedItem").animate( // );
}).toggle( // <--- you just stack the toggle function here ...
function(){
$(this).text( // );
},
function(){
$(this).text( // );
});
我已经为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 e.g. 1 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
$(this).toggleText('Show', 'Hide'); // Hide, Show, Hide ... and so on.
});
//------- END e.g. 1 -------
//------- BEGIN e.g. 2 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
$(this).toggleText('Unknown', 'Hide'); // Hide, Unknown, Hide ...
});
//------- END e.g. 2 -------
//------- BEGIN e.g. 3 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
$(this).toggleText(); // Unknown, Unknown, Unknown ...
});
//------- END e.g.3 -------
//------- BEGIN e.g.4 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
$(this).toggleText('Show'); // '', Show, '' ...
});
//------- END e.g.4 -------
修改您的其他问题的答案，我会这样做：
$(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);
});
});
在大多数情况下，与点击事件相关的行为更为复杂。例如，用于切换某些元素可见性的链接，在这种情况下，除了其他行为之外，您还希望将链接文本从“显示详细信息”交换为“隐藏详细信息”。在这种情况下，这将是首选解决方案：
$.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");
});
$.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");
Nate-Wilkins的改进功能：
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!");
您还可以通过使用toggleClass（）作为想法来切换文本。
.myclass::after {
content: 'more';
}
.myclass.opened::after {
content: 'less';
}
然后用
$(myobject).toggleClass('opened');
这不是很干净和聪明的方法，但是它非常易于理解和使用somtimes-像奇数和偶数-布尔型像：
var moreOrLess = 2;
$('.Btn').on('click',function(){
if(moreOrLess % 2 == 0){
$(this).text('text1');
moreOrLess ++ ;
}else{
$(this).text('more');
moreOrLess ++ ;
}
});
为什么不跟踪可点击锚自身上没有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");
}
});
});