JQueryを使用してアンカータグのhtmlテキストをテキストに切り替える方法を知っている人はいますか?クリックするとテキストが「背景を表示」と「テキストを表示」の間で交互に切り替わり、別の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();
});
});
前もって感謝します。
問題は私です!これは同期していませんでしたが、これは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();
});
});
助けてくれてありがとう!
$(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つのリンクを作成し、いずれかがクリックされたときにそれらを切り替えることで、同じ効果を実現できます。
最も美しい答えは...この関数で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');
最初のHTMLテキストがわずかに異なる場合(余分なスペース、ピリオドなど)にロジック(x == b?a:b)を使用したため、 '意図した初期値の重複した表示を取得することはありません
(また、なぜHTMLの例に意図的にスペースを残したのか;-)
以下のMeulesが私の注意を喚起した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>.')
);
(またはこのようなもの)
@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/
積み重ねてみませんか:
$("#clickedItem").click(function(){
$("#animatedItem").animate( // );
}).toggle( // <--- you just stack the toggle function here ...
function(){
$(this).text( // );
},
function(){
$(this).text( // );
});
var el = $('#someSelector');
el.text(el.text() == 'view more' ? 'view less' : 'view more');
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 -------
あなたの 他の質問 から私の答えを修正して、私はこれをするでしょう:
$(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);
});
});
これを使って
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が適切にエンコードされていれば、HTMLを使用することもできます。
ほとんどの場合、クリックイベントに関連付けられたより複雑な動作になります。たとえば、ある要素の可視性を切り替えるリンク。この場合、他の動作に加えて、リンクテキストを「詳細を表示」から「詳細を非表示」に切り替えることができます。その場合、これは推奨されるソリューションです。
$.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");
});
また、toggleClass()を思考として使用してTextを切り替えることもできます。
.myclass::after {
content: 'more';
}
.myclass.opened::after {
content: 'less';
}
そして使用する
$(myobject).toggleClass('opened');
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!");
<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);
}
});
$.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");
クリック可能なアンカー自体の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"の間で切り替えたいとします。
これは非常にクリーンでスマートな方法ではありませんが、非常に簡単に理解して使用することができます。
var moreOrLess = 2;
$('.Btn').on('click',function(){
if(moreOrLess % 2 == 0){
$(this).text('text1');
moreOrLess ++ ;
}else{
$(this).text('more');
moreOrLess ++ ;
}
});