jQuery 切换文本？

Question

如何使用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();
    });
});

- mtwallet

---

你发布的代码有什么问题？在寻找解决方案之前了解问题会有所帮助。 - Yacoby

这段代码没有按照你的预期执行吗？ - Josh Wright

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");
});

切换可以隐藏或显示元素。您可以通过使用两个链接并在单击任一链接时切换它们来实现相同的效果。

- Kyle Butt

---

如果您想要类似的功能，可以让<a>标签文本（例如“显示文本”和“显示背景”）与锚点HTML保持在一起，而不是将其分离到jQuery代码中，请参阅https://dev59.com/8Ifca4cB1Zd3GeqPoNag#28500651。 - George Hawkins

Answer 2

最美的答案是...

使用此函数扩展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');

我曾使用逻辑运算符 ( 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>.')
);

（或类似的内容）

- JxAxMxIxN

---

太棒了！您可以将“文本”更改为“HTML”，并切换类以使用此功能作为“阅读更多/阅读更少”功能 :) - Meules

当然可以！在 Web 应用程序和不需要担心文本被搜索引擎找到的情况下，这是一个很好的解决方案。只需记住，如果“阅读更多”部分的内容实际上可以通过其内容帮助网站排名在搜索引擎中，那么这可能不是最佳选择。 - JxAxMxIxN

伙计，你是我个人英雄！谢谢你。 - Mego

Answer 3

抱歉，问题出在我这里！这是因为我的HTML代码写反了，导致同步不一致。在第一次点击时，我想让div淡出并且文字显示为“Show Text”。

下次在提问之前将会更加仔细检查！

我的代码现在是：

$(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();
  });
});

再次感谢您的帮助！

- mtwallet

---

读者注意！在jQuery 1.9中移除了toggle函数的过载，除非恢复此功能，否则您将无法使用它。但也许最好是继续查看其他答案。 - user

Answer 4

改进和简化 @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');

- Diego Favero

---

@webkitfanz 将像*that.text(a)*这样的地方更改为html，很简单。参见 -> $.fn.extend({ toggleText: function(a, b){ return this.html(this.html() == b ? a : b); } }); - Vishwa

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/

- Nate-Wilkins

---

这很容易实现。起初我不确定它是否能奏效，因为我的点击操作还会触发slideToggle，但是它毫无问题地完成了任务。 它非常适合“显示文本”/“隐藏文本”的用途。谢谢！ - acarito

Answer 6

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

- Judson Terrell

---

做得好。在我看来，这是最佳答案，只用了两行代码。 - user9008566

简单明了，确保您的初始切换文本为“查看更多”。 - BradTheBluefish

Answer 7

为什么不把它们堆叠起来呢？

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

- Eugene Koekemoer

---

jQuery v1.9中移除了toggle的这种实现方式，现在它用于切换可见性。请参阅此处。 - solipsicle

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>

Fiddle: http://jsfiddle.net/DmppM/

- Tomasz Majerski

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

- firstandlastpost

Answer 10

请使用此代码。

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>

如果正确编码，甚至可以使用HTML。

- aWebDeveloper