jQuery Przełącz tekst?

79

Jak zmienić tekst HTML tagu kotwicy za pomocą jQuery? Chcę kotwicy, która po kliknięciu tekstu zmienia się między Show Background&, Show Texta także zanika i zanika inny element div. To było moje najlepsze przypuszczenie:

$(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
źródło
Co było nie tak z opublikowanym przez Ciebie kodem? Warto poznać problem, zanim będzie trzeba szukać rozwiązania.
Yacoby
Czy ten kod nie robi tego, co chcesz?
Josh Wright

Odpowiedzi:

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

Przełącz ukrywa lub pokazuje elementy. Możesz osiągnąć ten sam efekt, używając przełącznika, mając 2 linki i przełączając je po kliknięciu jednego z nich.

Kyle Butt
źródło
Aby dowiedzieć się czegoś podobnego, co pozwala zachować <a>tekst tagu, np. „Pokaż tekst” i „Pokaż tło”, razem z zakotwiczonym kodem HTML, zamiast rozdzielać go na kod jQuery, zobacz stackoverflow.com/a/28500651/245602
George Hawkins
58

Najpiękniejszą odpowiedzią jest ... Rozszerz jQuery o tę funkcję ...

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

HTML:

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

Posługiwać się:

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

Użyłem logiki (x == b? A: b) w przypadku, gdy początkowy tekst HTML jest nieco inny (dodatkowa spacja, kropka itp.), Więc nigdy nie uzyskasz podwójnego pokazania zamierzona wartość początkowa

(Również dlaczego celowo zostawiłem spacje w przykładzie HTML ;-)

Inną możliwością użycia przełącznika HTML, na którą zwrócił mi uwagę Meules [poniżej], jest:

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

Posługiwać się:

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

(lub coś w tym stylu)

JxAxMxIxN
źródło
2
Genialne rozwiązanie! Można zmienić text, aby htmli przełączanie klas aby skorzystać z tej funkcji jako czytaj więcej / mniej funkcji czytania :)
Meules
Jasne, że tak! W aplikacjach internetowych i przypadkach, w których nie musisz martwić się o tekst znajdowany przez wyszukiwarki, jest to świetne rozwiązanie. Należy tylko pamiętać, że jeśli treść w sekcji „czytaj więcej” mogłaby rzeczywiście pomóc w pozycjonowaniu witryny w wyszukiwarkach ze względu na jej zawartość, może to nie być najlepsza opcja.
JxAxMxIxN
37

Przepraszam, że to ja! nie był zsynchronizowany, ale to dlatego, że mam nieprawidłowy tekst HTML. Po pierwszym kliknięciu chcę, aby element div zniknął, a tekst brzmiał „Pokaż tekst”.

Następnym razem sprawdzę dokładniej, zanim zapytam!

Mój kod to teraz:

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

Jeszcze raz dziękuję za pomoc!

mtwallet
źródło
17
Czytelnicy, uważajcie! To przeciążenie togglefunkcji zostało usunięte w jQuery 1.9, nie będziesz mógł z niego korzystać, dopóki nie przywrócisz tej funkcji . Ale może lepiej będzie, jeśli przejdziesz do innych odpowiedzi.
użytkownik
25

Ulepszanie i upraszczanie odpowiedzi @ 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;
    }
});

Użyj jako:

$("#YourElementId").toggleText('After', 'Before');
Diego Favero
źródło
1
@webkitfanz zmień tekst w takich miejscach .text (a) na html , proste. Zobacz -> $ .fn.extend ({toggleText: function (a, b) {return this.html (this.html () == b? A: b);}});
Vishwa
16
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");

Rozszerzenie dla JQuery, które wykonuje tylko przełączanie tekstu.

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

Nate-Wilkins
źródło
1
To było bardzo łatwe do wykonania. Na początku nie byłem pewien, czy to zadziała, ponieważ moje kliknięcie również uruchamia slideToggle, ale udało się bez problemów. Świetnie nadaje się do zastosowań „pokaż tekst” / „Ukryj tekst”. Dzięki!
acarito
12
var el  = $('#someSelector');    
el.text(el.text() == 'view more' ? 'view less' : 'view more');
Judson Terrell
źródło
Pracuje. Najlepsza odpowiedź imo, zrobiłem to w 2 linijkach.
7

Dlaczego po prostu ich nie ułożysz ::

$("#clickedItem").click(function(){
  $("#animatedItem").animate( // );
}).toggle( // <--- you just stack the toggle function here ...
function(){
  $(this).text( // );
},
function(){
  $(this).text( // );
});
Eugene Koekemoer
źródło
5
Ta implementacja toggle została usunięta z Jquery v1.9, teraz przełącza widoczność. Zobacz tutaj
solipsicle
6

Użyj html (), aby przełączyć zawartość HTML. Podobny do kodu fflyer05 :

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

Stosowanie:

<a href="#" onclick='$(this).toggleText("<strong>I got toggled!</strong>","<u>Toggle me again!</u>")'><i>Toggle me!</i></a>

Skrzypce: http://jsfiddle.net/DmppM/

Tomasz Majerski
źródło
4

Napisałem własne małe rozszerzenie dla toggleText. Może się przydać.

Skrzypce: https://jsfiddle.net/b5u14L5o/

Rozszerzenie jQuery:

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

Stosowanie:

...
<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
źródło
3

Użyj tego

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

Oto jak to pozwać

Możesz nawet użyć html, pod warunkiem, że jest on poprawnie zakodowany

aWebDeveloper
źródło
2

Modyfikując swoją odpowiedź z twojego innego pytania , zrobiłbym to:

$(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);
 });
});
Mottie
źródło
Wow zajmie mi trochę pracy, jak to działa, ale dzięki za pomoc wypróbuję to!
mtwallet
BTW, mam teraz link do jQuery 1.4 i rozbiłem bibliotekę narzędzi, izolując tylko potrzebne części. Myślę, że konflikt dotyczył części biblioteki Flash Embed.
mtwallet
Jeśli nie wiesz, oi tsą zdefiniowane w operatorze trójskładnikowym ( en.wikipedia.org/wiki/Ternary_operation ) ... i ups zapomniałem dodać varna początku
zmienię
1

W większości przypadków bardziej złożone zachowanie byłoby powiązane ze zdarzeniem kliknięcia. Na przykład łącze, które przełącza widoczność jakiegoś elementu, w takim przypadku oprócz innego zachowania chciałbyś zamienić tekst łącza z „Pokaż szczegóły” na „Ukryj szczegóły”. W takim przypadku byłoby to preferowane rozwiązanie:

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

Możesz to wykorzystać w ten sposób:

$(document).on('click', '.toggle-details', function(e){
  e.preventDefault();
  //other things happening
  $(this).toggleText("Show Details", "Hide Details");
});
fflyer05
źródło
Świetnie, w definicji toggleText brakuje znaku „}”
Kat.
1
$.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");
RulazISC
źródło
czy to ma być dodane do jquery?
Joseph Dailey,
1
<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);
    });

})();
J.Archiquette
źródło
1

Być może nadmiernie upraszczam problem, ale tego używam.

$.fn.extend({
    toggleText: function(a, b) {
        $.trim(this.html()) == a ? this.html(b) : this.html(a);
    }
});
I ja
źródło
1

Ulepszona funkcja Nate-Wilkinsa:

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>

za pomocą:

$('.button-toggle-text').toggleText("Hello World", "Bye!");
Yurii Rabeshko
źródło
1

Możesz również toggleText, używając jako myśli toggleClass ().

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

A następnie użyj

$(myobject).toggleClass('opened');
Ricky Levi
źródło
0

nie jest to bardzo czysty i inteligentny sposób, ale czasami jest bardzo łatwy do zrozumienia i użycia - jest jak nieparzysty i parzysty - boolean jak:

  var moreOrLess = 2;

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

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

});
Erez Lieberman
źródło
0

Dlaczego nie śledzić stanu przechodzenia przez klasę bez reguł CSS w samej klikalnej kotwicy

$(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");
        }
    });
});
ortonomia
źródło
0
var jPlayPause = $("#play-pause");
jPlayPause.text(jPlayPause.hasClass("playing") ? "play" : "pause");
jPlayPause.toggleClass("playing");

To jest część przemyślenia przy użyciu metody toggleClass () jQuery.

Załóżmy, że masz element z id = "play-pause" i chcesz przełączać tekst między "play" i "pause".

mriiiron
źródło