jQuery 토글 텍스트?

jQuery 토글 텍스트?

---

아무도 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();
    });
});

미리 감사드립니다.

---

$(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 텍스트가 잘못된 방식이기 때문입니다. 첫 번째 클릭에서 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();
  });
});

도와 주셔서 다시 한 번 감사드립니다!

---

@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');

---

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 -------

---

다른 질문 에서 내 대답을 수정 하면 다음과 같이 할 수 있습니다.

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

---

$.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 ()를 생각으로 사용하여 toggleText를 사용할 수 있습니다.

.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