it-swarm.com.de

So ändern Sie den Schaltflächentext in JQuery

Ich habe bisher diesen Funktionscode:

Geige: http://jsfiddle.net/r4emt/12/

Bevor Sie die JQuery-Benutzeroberflächen-Autovervollständigung eingeben, lautet die Schaltfläche "Hallo". Sie können "item" in die JQuery UI-Autovervollständigung eingeben. Die Schaltfläche zeigt jetzt "Welt". Klicken Sie auf die Schaltfläche "Welt", um das Element in die Liste aufzunehmen. Wenn Sie den Artikel erneut eingeben, können Sie einen auswählen und auf die Schaltfläche Ersetzen eines bereits in der Liste enthaltenen Elements klicken. Wenn Sie dies jedoch tun, wird auf der Schaltfläche immer noch "Welt" angezeigt, es sollte jedoch "Hallo" angezeigt werden, da sich im Eingabefeld nichts befindet. Wenn Sie in das Eingabefeld klicken und dann auf Löschen oder auf den Zurückpfeil klicken, wird wieder "Hallo" angezeigt, aber es gibt nichts zu löschen oder links davon. Ich denke, es hat mit diesem Teil des Codes zu tun:

$('#inputWrapper').on('keyup', '#tags', function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');
    }
});

Speziell der 'keyup'-Teil. Meine Frage ist also, wie kann ich das beheben, so dass immer, wenn das Eingabefeld leer ist, der Button immer "Hallo" und wenn das Feld Eingaben enthält, der Button "Welt" lautet. Vielen Dank!

13
sbru

Hier ist die Arbeitsgeige. Durchgeführte Änderungen sind:

$('#tags').keyup( function() {
    if($(this).val() == '') {
        $('button.addButton').text('Hello');
    } else {
        $('button.addButton').text('World');        
    }
});

und am Ende Ihres Buttons klicken Sie auf:

$('#tags').val('');
$('#tags').keyup();
23
Daniel Eidson

Ich weiß, dass dies ein langer, toter Faden ist, aber ich musste dies hinzufügen, da ich gerade zwei Tage damit beschäftigt war, einen Speicherverlust aufzuspüren (verursacht durch mich, Code von dieser Seite zu verwenden).

WICHTIG: Verwenden Sie jQuerys text () nicht für Schaltflächenelemente!

Die Funktion erstellt etwas im DOM, das nicht mit empty () entfernt werden kann. Wenn Sie die Funktion dann mehrmals über einen längeren Zeitraum aufrufen, wird eine große Menge Müll in Ihr DOM gestoßen, wodurch das Material beschädigt wird.

Siehe jQuery API-Dokumentation).

(Ich kann nicht genau finden, wo es in der Dokumentation steht, aber irgendwo ist es drin, ich muss jetzt für meinen Zug rennen.) ...

9
User2

jsFiddle-Arbeitsdemo

    $('#inputWrapper').on('keyup', '#tags', function() {
        if($(this).val() == "") {
            $('button.addButton').html('Hello1');
        } else {
            $('button.addButton').html('World');
        }
    });
1
Mohammad Adil

Könnten Sie den Text nicht einfach auf "Hallo" setzen, nachdem er darauf geklickt hat? Fügen Sie dies am unteren Rand Ihrer Schaltflächenklickfunktion hinzu:

$(this).text('Hello');

http://jsfiddle.net/r4emt/13/

1
indot_brad

Diese Funktion funktioniert nur beim ersten Mal, da der Ereignis-Listener nach seiner Ausführung immer nach dem Keyup ausgewertet wird, wodurch das Eingabefeld immer einen Wert hat. Sobald Sie auf die Schaltfläche klicken, wenn Sie etwas eingeben und durch Drücken der Rücktaste die Rücktaste löschen, ändert sich die Einstellung wieder in Hallo.

Um die gewünschten Ergebnisse zu erzielen, wenn Sie auf die Schaltfläche "Senden" klicken, da Sie Aus dem Eingabefeld löschen, können Sie auch den Text dort ändern.

Siehe: http://jsfiddle.net/r4emt/37/

Ich habe gerade hinzugefügt:

//refreshes button name
$(this).text('Hello');

bis zum Ende der Schaltflächenklickfunktion.

0
jth_92

Verwenden Sie die 'Text'-Funktion

       $("#inputWrapper").click(function () {
        $(this).text(function(i, v){
           return v === 'Hello' ? 'World' : 'Hello'
        })
0
Tharinda_tpw

Setzen Sie die Bedingung wie folgt

if($.trim($(this).val()) == '')

unerwünschte Leerzeichen zu entfernen. Außerdem sollten Sie den Schaltflächentext im Handler des Klickereignisses in "Hallo" ändern

Fügen Sie dies am Ende der Klickfunktion hinzu: $(this).text('Hello');

Hier ist der Code: http://jsfiddle.net/r4emt/34/

0
armandocj