jQuery Chuyển đổi Văn bản?

Làm cách nào để chuyển đổi văn bản HTML của thẻ liên kết bằng jQuery? Tôi muốn một liên kết mà khi được nhấp vào, văn bản sẽ xen kẽ giữa Show Background& Show Textcũng như mờ dần trong & ra một div khác. Đây là dự đoán tốt nhất của tôi:

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

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

Chuyển đổi ẩn hoặc hiển thị các phần tử. Bạn có thể đạt được hiệu ứng tương tự bằng cách sử dụng chuyển đổi bằng cách có 2 liên kết và chuyển đổi chúng khi một trong hai được nhấp vào.

Câu trả lời hay nhất là ... Mở rộng jQuery với chức năng này ...

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

HTML:

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

Sử dụng:

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

Tôi đã sử dụng logic (x == b? A: b) trong trường hợp văn bản HTML ban đầu hơi khác một chút (thêm dấu cách, dấu chấm, v.v.), vì vậy bạn sẽ không bao giờ nhận được bản sao hiển thị giá trị ban đầu dự định

(Ngoài ra, tại sao tôi lại cố tình để lại khoảng trắng trong ví dụ HTML ;-)

Một khả năng khác để sử dụng chuyển đổi HTML được Meules chú ý đến [bên dưới] là:

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

Sử dụng:

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

(hoặc thứ gì đó giống thế này)

Xin lỗi vấn đề là tôi! không đồng bộ nhưng điều này là do tôi có văn bản HTML không đúng cách. Trong lần nhấp đầu tiên, tôi muốn div mờ dần và văn bản có nội dung "Show Text".

Sẽ kiểm tra kỹ hơn lần sau trước khi tôi hỏi!

Mã của tôi bây giờ là:

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

Cảm ơn một lần nữa vì sự giúp đỡ!

Cải thiện và đơn giản hóa câu trả lời của @ 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;
    }
});

Sử dụng như là:

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

Phần mở rộng cho JQuery chỉ thực hiện chuyển đổi văn bản.

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

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

Tại sao bạn không xếp chúng lại ::

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

Sử dụng html () để chuyển đổi nội dung HTML. Tương tự với mã của fflyer05 :

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

Sử dụng:

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

Tôi đã viết tiện ích mở rộng nhỏ của riêng mình cho toggleText. Nó có thể có ích.

Fiddle: https://jsfiddle.net/b5u14L5o/

jQuery Extension:

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

Sử dụng:

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

Dùng cái này

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

Đây là cách bạn kiện nó

 
   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>

Bạn thậm chí có thể sử dụng html miễn là nó được mã hóa html đúng cách

Sửa đổi câu trả lời của tôi từ câu hỏi khác của bạn , tôi sẽ làm điều này:

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

Trong hầu hết các trường hợp, bạn sẽ có hành vi phức tạp hơn gắn với sự kiện nhấp chuột của mình. Ví dụ: một liên kết chuyển đổi khả năng hiển thị của một số phần tử, trong trường hợp đó, bạn muốn hoán đổi văn bản liên kết từ "Hiển thị chi tiết" thành "Ẩn chi tiết" ngoài hành vi khác. Trong trường hợp đó, đây sẽ là một giải pháp ưu tiên:

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

Bạn có thể sử dụng nó theo cách này:

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

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

})();

Có lẽ tôi đang đơn giản hóa vấn đề, nhưng đây là những gì tôi sử dụng.

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

Chức năng cải tiến của 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>

sử dụng:

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

Bạn cũng có thể toggleText bằng cách sử dụng toggleClass () như một ý nghĩ ..

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

Và sau đó sử dụng

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

đây không phải là cách rất sạch sẽ và thông minh nhưng rất dễ hiểu và dễ sử dụng somtimes - giống như kiểu boolean lẻ và chẵn - như:

  var moreOrLess = 2;

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

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

});

Tại sao không theo dõi trạng thái của thông qua một lớp mà không có quy tắc CSS trên chính neo có thể nhấp

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

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

Đây là một phần suy nghĩ bằng cách sử dụng phương thức toggleClass () của jQuery.

Giả sử bạn có một phần tử có id = "play-pause" và bạn muốn chuyển văn bản giữa "play" và "pause".