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

तत्वों को छुपाता है या दिखाता है। आप 2 लिंक होने और टॉगल करने पर एक ही प्रभाव को प्राप्त कर सकते हैं जब उन्हें क्लिक किया जाता है।

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

मैंने तर्क (x == b! A: b) का उपयोग इस मामले में किया है कि प्रारंभिक HTML पाठ थोड़ा अलग है (एक अतिरिक्त स्थान, अवधि, आदि ...) इसलिए आपको कभी भी डुप्लिकेट दिखावा नहीं मिलेगा प्रारंभिक मूल्य का इरादा है

(यह भी कि मैं जानबूझकर HTML उदाहरण में रिक्त स्थान क्यों छोड़ रहा हूं ;-)

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 पाठ गलत तरीके से है। पहले क्लिक पर मैं चाहता हूं कि डिव को फीका कर दिया जाए और टेक्स्ट को "शो टेक्स्ट" कहा जाए।

मेरे पूछने से पहले अगली बार और अधिक अच्छी तरह से जाँच करेंगे!

मेरा कोड अब है:

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

@ नैट के उत्तर में सुधार और सरलीकरण:

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

Question 9

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/

Question 10

मैंने 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 -------

Question 11

इसे इस्तेमाल करो

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>

Expand snippet

आप HTML का उपयोग भी कर सकते हैं बशर्ते कि यह html ठीक से एन्कोडेड हो

Question 12

आपके अन्य प्रश्न से मेरे उत्तर को संशोधित करते हुए , मैं यह करूंगा:

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

Question 13

ज्यादातर मामलों में आपके क्लिक इवेंट पर अधिक जटिल व्यवहार होता है। उदाहरण के लिए एक लिंक जो किसी तत्व की दृश्यता को दर्शाता है, जिस स्थिति में आप अन्य व्यवहार के अलावा "शो विवरण" से लिंक पाठ को "छिपाएं विवरण" में स्वैप करना चाहते हैं। उस मामले में यह एक पसंदीदा समाधान होगा:

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

Question 14

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

Question 15

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

})();

Question 16

शायद मैं समस्या की देखरेख कर रहा हूं, लेकिन यही वह है जो मैं उपयोग करता हूं।

$.fn.extend({
    toggleText: function(a, b) {
        $.trim(this.html()) == a ? this.html(b) : this.html(a);
    }
});

Question 17

नैट-विल्किंस का बेहतर कार्य:

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!");

Question 18

तुम भी एक विचार के रूप में toggleClass () का उपयोग करके टॉगल कर सकते हैं ..

.myclass::after {
 content: 'more';
}
.myclass.opened::after {
 content: 'less';
}

और फिर उपयोग करें

$(myobject).toggleClass('opened');

Question 19

यह बहुत साफ और स्मार्ट तरीका नहीं है, लेकिन इसके बहुत आसान समझने और somtimes का उपयोग करने के लिए - इसकी तरह अजीब और यहां तक कि - बूलियन:

  var moreOrLess = 2;

  $('.Btn').on('click',function(){

     if(moreOrLess % 2 == 0){
        $(this).text('text1');
        moreOrLess ++ ;
     }else{
        $(this).text('more'); 
        moreOrLess ++ ;
     }

});

Question 20

क्लिक करने योग्य लंगर पर सीएसएस नियमों के बिना एक वर्ग के माध्यम से राज्य की स्थिति पर नज़र क्यों नहीं रखी जाती है

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

Question 21

var jPlayPause = $("#play-pause");
jPlayPause.text(jPlayPause.hasClass("playing") ? "play" : "pause");
jPlayPause.toggleClass("playing");

यह jQuery के टॉगलक्लास () पद्धति का उपयोग करके सोचा जाने वाला एक टुकड़ा है।

मान लें कि आपके पास आईडी = "प्ले-पॉज़" वाला एक तत्व है और आप "प्ले" और "पॉज़" के बीच पाठ को टॉगल करना चाहते हैं।