jQuery Переключити текст?


79

Як перемикати HTML-текст прив'язки тегом за допомогою jQuery? Я хочу прив'язку, яка при натисканні на текст чергується між 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();
    });
});

Що сталося з кодом, який ви опублікували? Це допомагає знати проблему, перш ніж шукати її рішення.
Yacoby

Цей код робить не те, що ти хочеш?
Джош Райт,

Відповіді:


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

Переключити приховування або показ елементів. Ви можете досягти того ж ефекту, використовуючи тумблер, маючи 2 посилання та перемикаючи їх при натисканні будь-якого з них.


Щось подібного, що дозволяє зберігати <a>текст тегу, наприклад, "Показати текст" та "Показати фон", разом із якорем HTML, а не відокремлювати його у коді jQuery, див. Stackoverflow.com/a/28500651/245602
Джордж Хокінс

58

Найкрасивіша відповідь - ... Розширте 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 ;-)

Ще однією можливістю використання перемикача HTML, на яку мені звернув увагу Meules [нижче], є:

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

(або щось подібне)


2
Блискуче рішення! Ви можете перейти textдо htmlта переключити класи, щоб використовувати цю функцію як функцію читання більше / менше читання :)
Meules

Звичайно, міг! У веб-додатках та випадках, коли вам не потрібно турбуватися про те, що текст знайдений пошуковими системами, це чудове рішення. Тільки майте на увазі, що якщо вміст у розділі «читати далі» може насправді допомогти рейтингу веб-сайтів у пошукових системах через його вміст, це може бути не найкращим варіантом.
JxAxMxIxN

37

Вибачте, проблема в мені! не синхронізувалось, але це тому, що я неправильно використовую текст 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();
  });
});

Ще раз спасибі за допомогу!


17
Читачі, будьте обережні! Це перевантаження toggleфункції було видалено в jQuery 1.9, ви не зможете використовувати його, якщо не відновите цю функцію . Але, можливо, краще, якщо ви перейдете до інших відповідей.
користувач

25

Удосконалення та спрощення відповіді @ 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');

1
@webkitfanz змініть текст у таких місцях, як. text (a) на html , простий. Див. -> $ .fn.extend ({toggleText: function (a, b) {return this.html (this.html () == b? A: b);}});
Вішва,

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

Розширення для JQuery, яке виконує лише перемикання тексту.

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


1
Це було дуже легко здійснити. Спочатку я не був впевнений, що це зробить трюк, оскільки моя дія натискання також запускає slideToggle, але це зробило фокус без проблем. Він чудово підходить для використання "show text" / "Hide Text". Дякую!
акаріто

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

Працює. Найкраща відповідь imo, зробив це у 2 рядки.

7

Чому б вам просто не скласти їх ::

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

5
Ця реалізація перемикача була вилучена з Jquery v1.9, тепер вона перемикає видимість. Дивіться тут
solipsicle


4

Я написав власне маленьке розширення для 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 -------

3

Використовуй це

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

Ось як ви подаєте до суду

Ви навіть можете використовувати html за умови правильного кодування html


2

Змінюючи свою відповідь на інше ваше запитання , я б зробив це:

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

Вау, я трохи попрацюю, як це працює, але дякую за допомогу, я спробую це!
mtwallet

До речі, тепер я зв’язав jQuery 1.4 і розбив бібліотеку інструментів, виділяючи лише ті частини, які мені потрібні. Я думаю, конфлікт стався з частиною бібліотеки Flash Embed.
mtwallet

Якщо ви не знали, значення oі tвизначаються в тернарному операторі ( en.wikipedia.org/wiki/Ternary_operation ) .... і на жаль, я забув додати varпопереду - я відредагую це зараз
Мотті

1

У більшості випадків у вас буде більш складна поведінка, пов’язана з вашою подією кліку. Наприклад, посилання, яке перемикає видимість якогось елемента, і в цьому випадку ви хочете поміняти текст посилання з "Показати деталі" на "Сховати деталі" на додаток до іншої поведінки. У цьому випадку це було б кращим рішенням:

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

Приємно, у визначенні toggleText пропущено символ '}'
Кет

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

це призначено для додавання до jquery?
Джозеф Дейлі

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

})();

1

Можливо, я занадто спрощую проблему, але саме цим я користуюся.

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

1

Покращена функція Нейт-Вілкінса:

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

1

Ви також можете перемикатиText, використовуючи toggleClass () як думку.

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

А потім використовувати

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

0

це не дуже чистий та розумний спосіб, але його дуже просто зрозуміти та використати часом - це як дивно та парно - логічно:

  var moreOrLess = 2;

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

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

});

0

Чому б не відстежувати стан класу без правил 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");
        }
    });
});

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

Це думка з використанням методу jQuery toggleClass ().

Припустимо, у вас є елемент з id = "play-pause", і ви хочете переключити текст між "play" і "pause".

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.