[jquery] jQuery 토글 텍스트?

Question 1

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

Question 2

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

토글은 요소를 숨기거나 표시합니다. 두 개의 링크가 있고 둘 중 하나를 클릭 할 때 토글하여 토글을 사용하여 동일한 효과를 얻을 수 있습니다.

Question 3

가장 아름다운 대답은 …
이 함수로 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>.')
);

(또는 이와 비슷한 것)

Question 4

문제는 나야 미안해! 동기화되지 않았지만 이것은 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();
  });
});

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

Question 5

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

Question 6

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/

Question 7

var el  = $('#someSelector');
el.text(el.text() == 'view more' ? 'view less' : 'view more');

Question 8

그냥 쌓아 두는 게 어때요 ::

$("#clickedItem").click(function(){
  $("#animatedItem").animate( // );
}).toggle( // <--- you just stack the toggle function here ...
function(){
  $(this).text( // );
},
function(){
  $(this).text( // );
});