Zmień zawartość div - jQuery

89

Jak można zmienić zawartość tego div, gdy zostanie kliknięty jeden z LINKÓW?

<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
źródło
podobne pytanie do skierowania: stackoverflow.com/questions/1309452/…
Gurjot kaur

Odpowiedzi:

156

Możesz zapisać się na zdarzenie .click dla linków i zmienić zawartość div za pomocą .htmlmetody:

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

Pamiętaj jednak, że jeśli zmienisz zawartość tego elementu div, przypisany przez Ciebie moduł obsługi kliknięcia zostanie zniszczony. Jeśli zamierzasz wprowadzić nowe elementy DOM do elementu div, do którego musisz dołączyć programy obsługi zdarzeń, to załączniki te powinny zostać wykonane wewnątrz modułu obsługi .click po wstawieniu nowej zawartości. Jeśli oryginalny selektor zdarzenia jest zachowany, możesz również przyjrzeć się .delegatemetodzie dołączania modułu obsługi.

Darin Dimitrov
źródło
1
Jak mogę następnie załadować zawartość z INNEGO elementu div, na tej samej stronie, do # content-container?
Oliver 'Oli' Jensen
2
@Oliver 'Oli' Jensen, w ten sposób:$('#content-container').html($('#someOtherDivId').html());
Darin Dimitrov
dzięki Bogu! Zdałem sobie sprawę, że #div nie można zmienić przez .val (); zamiast funkcji powinniśmy użyć .html (); funkcje, które sprawiają, że działa! : D @cuSK thanks
gumuruh
live saver @DarinDimitrov
excitedmicrobe
14

Istnieją 2 funkcje jQuery, których będziesz chciał użyć tutaj.

1) click. Spowoduje to przyjęcie anonimowej funkcji jako jedynego parametru i wykona ją po kliknięciu elementu.

2) html. Spowoduje to pobranie ciągu html jako jedynego parametru i zastąpi zawartość elementu podanym kodem HTML.

W twoim przypadku będziesz chciał wykonać następujące czynności:

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

Jeśli chcesz tylko dodać zawartość do swojego div, zamiast zastępować wszystko w nim, powinieneś użyć append:

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

Jeśli chcesz, aby nowo dodane linki również dodawały nową zawartość po kliknięciu, powinieneś użyć delegowania zdarzenia :

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

Możesz spróbować tego samego z replaceewith ()

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

.replaceWith()Metoda usuwa treści z nowej zawartości DOM i wstawia na swoim miejscu za pomocą jednego połączenia.

Manoj Kadolkar
źródło
1

Spróbuj tego zmienić zawartość div za pomocą jQuery.

Zobacz więcej @ Zmień zawartość div za pomocą jQuery

$(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
źródło
-1

Próbować $('#score_here').html=total;

Sanjay Devarajan
źródło