반응형
jQuery 텍스트 전환?
jQuery를 사용하여 앵커 태그의 HTML 텍스트를 토글하는 방법?클릭할 때 텍스트가 서로 번갈아 나타나는 앵커를 원합니다.Show Background&Show Text또 다른 디브가 사라졌을 뿐만 아니라이것이 내가 추측한 최고의 추측입니다.
$(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");
});
요소를 숨기거나 표시합니다.두 개의 링크를 가지고 둘 중 하나를 클릭하면 토글을 사용하여 동일한 효과를 얻을 수 있습니다.
가장 아름다운 대답은...이 함수로 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>.')
);
(또는 이런것)
죄송합니다. 문제는 저입니다! 가 동기화되지 않았지만 HTML 텍스트를 잘못 사용했기 때문입니다.첫 번째 클릭 시 디브가 사라지고 텍스트가 "텍스트 표시"로 표시되도록 합니다.
다음에는 더 꼼꼼히 확인한 후에 부탁드리겠습니다!
지금 내 코드는:
$(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/
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()을 사용합니다.flyer05의 코드와 유사합니다.
$.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/
텍스트 전환을 위해 내가 직접 작은 확장자를 썼습니다.요긴하게 쓰일 겁니다.
Fiddle: 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이 제대로 인코딩되어 있다면 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);
});
});
대부분의 경우 클릭 이벤트와 관련된 복잡한 동작이 발생합니다.예를 들어, 일부 요소의 가시성을 토글하는 링크입니다. 이 경우 링크 텍스트를 다른 동작 외에 "상세 정보 표시"에서 "상세 정보 숨기기"로 전환할 수 있습니다.이 경우 다음과 같은 방법이 선호됩니다.
$.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);
}
});
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!");
토글할 수도 있습니다.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" 사이에서 텍스트를 전환하려고 한다고 가정합니다.
언급URL : https://stackoverflow.com/questions/2155453/jquery-toggle-text
반응형
'programing' 카테고리의 다른 글
| 파일 크기 기준을 충족하기 위해 파일에 삽입할 특정 길이의 문자열을 생성하는 방법? (0) | 2023.10.18 |
|---|---|
| 자바스크립트에서 시간대 오프셋이 있는 날짜를 ISO 8601 형식으로 지정하는 방법은 무엇입니까? (0) | 2023.10.18 |
| 일치하지 않는 변형 숨기기 (0) | 2023.10.18 |
| initiale mysql window api 함수 CreateProcessA 를 사용합니다. (0) | 2023.10.18 |
| 어떻게 하면 이 스크립트를 수정하여 레코드를 표시하지 않고 삭제할 수 있습니까? (0) | 2023.10.18 |