Как переключить 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();
});
});
Ответы:
$(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"); });
Toggle скрывает или показывает элементы. Вы можете добиться того же эффекта, используя переключатель, имея 2 ссылки и переключая их при нажатии любой из них.
источник
<a>
текст тега, например «Показать текст» и «Показать фон», вместе с привязанным HTML, а не разделять его на код jQuery, см. Stackoverflow.com/a/28500651/245602Самый красивый ответ ... Расширьте 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, на которую мое внимание обратил внимание Меулес [ниже]:
$.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>.') );
(или что-то вроде этого)
источник
text
чтобыhtml
и переключение классов , чтобы использовать эту функцию , как читать далее / читать меньше функции :)Извините, проблема во мне! был рассинхронизирован, но это было потому, что у меня неправильный текст 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(); }); });
Спасибо еще раз за помощь!
источник
toggle
функции была удалена в jQuery 1.9, вы не сможете использовать ее, если не восстановите эту функцию . Но, возможно, будет лучше, если вы перейдете к другим ответам.Улучшение и упрощение ответа @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');
источник
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/
источник
var el = $('#someSelector'); el.text(el.text() == 'view more' ? 'view less' : 'view more');
источник
Почему бы вам просто не сложить их:
$("#clickedItem").click(function(){ $("#animatedItem").animate( // ); }).toggle( // <--- you just stack the toggle function here ... function(){ $(this).text( // ); }, function(){ $(this).text( // ); });
источник
Используйте html () для переключения содержимого HTML. Аналогично коду fflyer05 :
$.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>
Fiddle: http://jsfiddle.net/DmppM/
источник
Я написал собственное небольшое расширение для 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 -------
источник
Использовать этот
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, если он правильно закодирован.
источник
Изменив свой ответ на ваш другой вопрос , я бы сделал следующее:
$(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); }); });
источник
o
иt
определены в тернарном операторе ( en.wikipedia.org/wiki/Ternary_operation ) .... и, к сожалению, я забыл добавитьvar
вперед - я отредактирую это сейчасВ большинстве случаев у вас будет более сложное поведение, связанное с событием щелчка. Например, ссылка, которая переключает видимость некоторого элемента, и в этом случае вы захотите поменять текст ссылки с «Показать подробности» на «Скрыть подробности» в дополнение к другому поведению. В этом случае это было бы предпочтительным решением:
$.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"); });
источник
$.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); }); })();
источник
Возможно, я упрощаю проблему, но это то, что я использую.
$.fn.extend({ toggleText: function(a, b) { $.trim(this.html()) == a ? this.html(b) : this.html(a); } });
источник
Улучшенная функция Нейта-Уилкинса:
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!");
источник
Вы также можете toggleText, используя toggleClass () как мысль ..
.myclass::after { content: 'more'; } .myclass.opened::after { content: 'less'; }
А затем используйте
$(myobject).toggleClass('opened');
источник
это не очень чистый и умный способ, но его очень легко понять и использовать иногда - как нечетное, так и даже - логическое, например:
var moreOrLess = 2; $('.Btn').on('click',function(){ if(moreOrLess % 2 == 0){ $(this).text('text1'); moreOrLess ++ ; }else{ $(this).text('more'); moreOrLess ++ ; } });
источник
Почему бы не отслеживать состояние через класс без правил 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"); } }); });
источник
var jPlayPause = $("#play-pause"); jPlayPause.text(jPlayPause.hasClass("playing") ? "play" : "pause"); jPlayPause.toggleClass("playing");
Это часть мысли с использованием метода jQuery toggleClass ().
Предположим, у вас есть элемент с id = "play-pause", и вы хотите переключать текст между "play" и "pause".
источник