Ändern Sie den Inhalt von div - jQuery

87

Wie ist es möglich, den Inhalt dieses Div zu ändern, wenn auf einen der LINKS geklickt wird?

<div align="center" id="content-container">
    <a href="#" class="click cgreen">Main Balance</a>
    <a href="#" class="click cgreen">PayPal</a>
    <a href="#" class="click cgreen">AlertPay</a>
</div>
Oliver 'Oli' Jensen
quelle
eine ähnliche Frage zu beziehen: stackoverflow.com/questions/1309452/…
Gurjot kaur

Antworten:

152

Sie können das .click-Ereignis für die Links abonnieren und den Inhalt des div mithilfe der folgenden .htmlMethode ändern :

$('.click').click(function() {
    // get the contents of the link that was clicked
    var linkText = $(this).text();

    // replace the contents of the div with the link text
    $('#content-container').html(linkText);

    // cancel the default action of the link by returning false
    return false;
});

Beachten Sie jedoch, dass der von Ihnen zugewiesene Klick-Handler zerstört wird, wenn Sie den Inhalt dieses Div ersetzen. Wenn Sie beabsichtigen, einige neue DOM-Elemente in das div einzufügen, für das Sie Ereignishandler anhängen müssen, sollten diese Anhänge nach dem Einfügen des neuen Inhalts im .click-Handler ausgeführt werden. Wenn die ursprüngliche Auswahl des Ereignisses erhalten bleibt, können Sie sich auch die .delegateMethode zum Anhängen des Handlers ansehen .

Darin Dimitrov
quelle
1
Wie kann ich dann Inhalte von ANOTHER div auf derselben Seite in # content-container laden?
Oliver 'Oli' Jensen
2
@Oliver 'Oli' Jensen, so:$('#content-container').html($('#someOtherDivId').html());
Darin Dimitrov
Gott sei Dank! Ich habe festgestellt, dass #div nicht durch .val () geändert werden kann. Funktion stattdessen sollten wir .html () verwenden; Funktionen, damit es funktioniert! : D @cuSK danke
gumuruh
Live-Sparer @DarinDimitrov
aufgeregt Microbe
14

Es gibt 2 jQuery-Funktionen, die Sie hier verwenden möchten.

1) click . Dies nimmt eine anonyme Funktion als einzigen Parameter und führt sie aus, wenn auf das Element geklickt wird.

2) html. Dies verwendet eine HTML-Zeichenfolge als einzigen Parameter und ersetzt den Inhalt Ihres Elements durch den bereitgestellten HTML-Code.

In Ihrem Fall möchten Sie also Folgendes tun:

$('#content-container a').click(function(e){
    $(this).parent().html('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});

Wenn Sie Ihrem div nur Inhalte hinzufügen möchten , anstatt alles darin zu ersetzen, sollten Sie Folgendes verwenden append:

$('#content-container a').click(function(e){
    $(this).parent().append('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});

Wenn Sie möchten, dass die neu hinzugefügten Links beim Klicken auch neuen Inhalt hinzufügen, sollten Sie die Ereignisdelegierung verwenden :

$('#content-container').on('click', 'a', function(e){
    $(this).parent().append('<a href="#">I\'m a new link</a>');
    e.preventDefault();
});
Joseph Silber
quelle
5
$('a').click(function(){
 $('#content-container').html('My content here :-)');
});
Jørgen
quelle
2

Sie können das gleiche mit replacewith () versuchen

$('.click').click(function() {
    // get the contents of the link that was clicked
    var linkText = $(this).text();

    // replace the contents of the div with the link text
    $('#content-container').replaceWith(linkText);

    // cancel the default action of the link by returning false
    return false;
});

Die .replaceWith()Methode entfernt Inhalte aus dem DOM und fügt mit einem einzigen Aufruf neue Inhalte an ihrer Stelle ein.

Manoj Kadolkar
quelle
1

Versuchen Sie dies, um den Inhalt von div mit jQuery zu ändern.

Weitere Informationen @ Inhalt von div mit jQuery ändern

$(document).ready(function(){
    $("#Textarea").keyup(function(){
        // Getting the current value of textarea
        var currentText = $(this).val();

        // Setting the Div content
        $(".output").text(currentText);
    });
});
Jonathan Klevin
quelle
-1

Versuchen $('#score_here').html=total;

Sanjay Devarajan
quelle