jQuery를 사용하여 앵커 태그의 HTML 텍스트를 전환하는 방법은 무엇입니까? 클릭하면 텍스트가 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");
});
토글은 요소를 숨기거나 표시합니다. 두 개의 링크가 있고 둘 중 하나를 클릭 할 때 토글하여 토글을 사용하여 동일한 효과를 얻을 수 있습니다.
<a>태그 텍스트 (예 : "Show Text"및 "Show Background")를 jQuery 코드로 분리하지 않고 앵커 HTML과 함께 유지할 수있는 유사한 내용은 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');
초기 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>.')
);
(또는 이와 비슷한 것)
text에 htmla가 더 읽을 때 / :) 적은 기능을 읽을이 기능을 사용하고 클래스 토글
문제는 나야 미안해! 동기화되지 않았지만 이것은 HTML 텍스트가 잘못된 방식이기 때문입니다. 첫 번째 클릭에서 div는 페이드 아웃되고 텍스트는 "Show Text"라고 표시됩니다.
내가 묻기 전에 다음에 더 철저히 확인하겠습니다!
내 코드는 다음과 같습니다.
$(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();
});
});
도와 주셔서 다시 한 번 감사드립니다!
@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( // );
});
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>
바이올린 : 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);
}
};
고소하는 방법은 다음과 같습니다.
html이 제대로 인코딩 된 경우 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");
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!");
클릭 가능한 앵커 자체에 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");
}
});
});