Ändern, div text mit jQuery Toggle

Bei der Verwendung slideToggle, wie Sie den Text ändern, der in der Nähe/zeigen?
Ich habe eine einfache, aber nicht den text ändern zurück.

Hier ist was ich getan habe:

JS:

$(document).ready(function(){
    $('.open').click(function(){        
            $('.showpanel').slideToggle('slow');
            $(this).text('close');
    });
    
        $('.open2').click(function(){        
            $('.showpanel2').slideToggle('slow');
            $(this).text('close');
    });        
});

CSS:

body{
font-size:20px;
}
#box{
    border:2px solid #000;
    width:500px;
    min-height:300px;      
}
.open,.open2 {
    width:450px;
    height:50px;
    background:blue;
    margin:5px auto 0 auto;
    color:#fff;     
    }
.showpanel,.showpanel2{
    width:450px;
    height:300px;
    margin:0 auto 10px auto;
    background:red;
    display:none;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">

<div class="open">Show</div>
<div class="showpanel">This is content</div>

<div class="open2">Show</div>
<div class="showpanel2">This is content</div>
</div>

http://jsfiddle.net/9EFNK/

InformationsquelleAutor olo | 2012-10-18

Können Sie die is() Behauptung Methode, um zu überprüfen, ob das panel geöffnet oder geschlossen ist in der animation Rückruf und setzen den text entsprechend - http://jsfiddle.net/9EFNK/7/

$('.open').click(function(){
    var link = $(this);
    $('.showpanel').slideToggle('slow', function() {
        if ($(this).is(':visible')) {
             link.text('close');                
        } else {
             link.text('open');                
        }        
    });       
});

Nice Verwendung einer callback-Funktion, um zu überprüfen, die Sichtbarkeit, nachdem die animation beendet ist, und ändern Sie den text entsprechend, ist Dies die beste Antwort hier 🙂

InformationsquelleAutor danwellman

Fügen Sie einfach eine einfache if-Anweisung zu testen, wird der text wie so

$('.open').click(function(){

       $('.showpanel').slideToggle('slow');
       if($(this).text() == 'close'){
           $(this).text('Show');
       } else {
           $(this).text('close');
       }
});

Wie diese DEMO

funktioniert wie ein Charme,Dank
Danke Kumpel, nett und einfach.
Die beste Antwort! Danke.

InformationsquelleAutor Mark Walters

7

Nicht die schönste Methode, aber es macht den job in einer einzigen Anweisung.
```
$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');
```
InformationsquelleAutor hjpotter92
3

Hier ist eine aktualisierte version http://jsfiddle.net/9EFNK/1/

Können Sie einfach Umschalten zwischen a-Klasse auf schließen/öffnen, führen Sie einen check für die Klasse, und ändern Sie den enthaltenen text entsprechend
```
if( $(this).hasClass('active') )
  $(this).text('open');
else
  $(this).text('Show');

$(this).toggleClass('active');
```
- Nizza und saubere Art,leicht zu verstehen, danke
InformationsquelleAutor Pantelis

Verwenden .toggle()

Hier ist funktionsfähige Demo

$('.open').click(function(){    
        $('.showpanel').slideToggle('slow');                  
    }).toggle(function() {
            $(this).text('Hide');
        }, function() {
            $(this).text('Show');
        });

oh, ich kann auf diesem Weg! vielen Dank 🙂

InformationsquelleAutor Dipak

2

überprüfen, dies kann Benutzer-Frage lösen Fiddle
- +1 für $(this).html('Anzeigen'):$(this).html('close'); ich wusste nicht, dass
- es bedeutet, dass wenn div aktuelle html-text schließen, dann ändert es sich zu zeigen und wenn es zeigen sich dann ändern zu schließen.. '?' ist der ternäre operator
- Danke für die Erklärung! 🙂
InformationsquelleAutor Man Programmer

versuchen, diese demo

$(document).ready(function(){
$('.open').toggle(function(){    
        $('.showpanel').slideToggle('slow');
        $(this).text('close');
}, function(){
    $('.showpanel').slideToggle('slow');
    $(this).text('Show');
});

    $('.open2').toggle(function(){

        $('.showpanel2').slideToggle('slow');
        $(this).text('close');
    }, function(){
        $('.showpanel2').slideToggle('slow');
        $(this).text('Show');
    });   
});

InformationsquelleAutor Pragnesh Chauhan

Verwenden Sie diese

jQuery.fn.toggleText = function() {
    var altText = this.data("alt-text");
    if (altText) {
        this.data("alt-text", this.html());
        this.html(altText);
    }
};

Hier ist, wie Sie es verwenden

JS:

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

HTML:

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

Können Sie sogar html verwenden, vorausgesetzt es ist html-codiert richtig

InformationsquelleAutor aWebDeveloper

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.