jQuery 切换文本？

Question

jQuery 切换文本？

83

如何使用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

20个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mottie · Answer 1

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

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

- Yurii Rabeshko · Answer 2

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

- fflyer05 · Answer 3

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

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

- RulazISC · Answer 4

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

- J.Archiquette · Answer 5

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

})();

- Andi · Answer 6

也许我将问题过于简单化了，但这是我使用的方法。

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

- Ricky Levi · Answer 7

您可以使用toggleClass()来切换文本，思路如下..

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

然后使用。

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

- ortonomy · Answer 8

为什么不通过一个类来跟踪状态，而不是在可点击的锚点本身上使用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");
        }
    });
});

- Erez Lieberman · Answer 9

这不是非常干净和聪明的方式，但非常容易理解和使用，有时候就像奇数和偶数一样-布尔类型：

  var moreOrLess = 2;

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

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

});

- mriiiron · Answer 10

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

这是一段关于使用jQuery的toggleClass()方法的思路。

假设你有一个id为"play-pause"的元素，你想在"播放"和"暂停"之间切换文本。