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

score 130 · Accepted Answer

$(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 个链接并在单击任一链接时切换它们。

score 68 · Accepted Answer

最漂亮的答案是...... 用这个功能扩展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>.')
);

（或类似的东西）

score 37 · Accepted Answer

对不起，问题是我！不同步，但这是因为我的 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();
  });
});

再次感谢您的帮助！

score 26 · Accepted Answer

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

score 16 · Accepted Answer

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

Extension for JQuery that only does toggling of text.

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

score 14 · Accepted Answer

14

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

于 2017-01-15T16:03:14.747 回答

score 7 · Accepted Answer

你为什么不把它们堆叠起来::

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

score 6 · Accepted Answer

使用html()切换 HTML 内容。类似于flyer05的代码：

$.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/

score 4 · Accepted Answer

我已经为 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 -------

score 3 · Accepted Answer

用这个

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，前提是它的 html 编码正确

score 2 · Accepted Answer

根据您的其他问题修改我的答案，我会这样做：

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

})();

score 1 · Accepted Answer

$.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");

score 1 · Accepted Answer

您还可以通过使用 toggleClass() 作为想法来切换文本。

.myclass::after {
 content: 'more';
}
.myclass.opened::after {
 content: 'less';
}

然后使用

$(myobject).toggleClass('opened');

score 1 · Accepted Answer

也许我过于简单化了这个问题，但这就是我使用的。

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

这不是非常干净和聪明的方式，但它很容易理解和使用有时 - 它像奇数和偶数 - 布尔值，如：

  var moreOrLess = 2;

  $('.Btn').on('click',function(){

     if(moreOrLess % 2 == 0){
        $(this).text('text1');
        moreOrLess ++ ;
     }else{
        $(this).text('more'); 
        moreOrLess ++ ;
     }

});

score 0 · Accepted Answer

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

这是使用 jQuery 的 toggleClass() 方法的一个想法。

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

score 0 · Accepted Answer

为什么不在可点击锚本身上跟踪没有 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");
        }
    });
});

jquery - jQuery切换文本？

20 回答 20

Related

Reference