Ubah konten div - jQuery


91

Bagaimana mungkin mengubah konten div ini, jika salah satu LINK diklik?

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

pertanyaan serupa untuk dirujuk: stackoverflow.com/questions/1309452/…
Gurjot kaur

Jawaban:


159

Anda bisa berlangganan acara .click untuk tautan dan mengubah konten div menggunakan .htmlmetode:

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

Namun perlu dicatat bahwa jika Anda mengganti konten div ini handler klik yang telah Anda tetapkan akan dimusnahkan. Jika Anda bermaksud memasukkan beberapa elemen DOM baru ke dalam div yang penangan kejadiannya perlu Anda lampirkan, lampiran ini harus dilakukan di dalam .click handler setelah memasukkan konten baru. Jika pemilih asli acara dipertahankan, Anda juga dapat melihat .delegatemetode untuk memasang penangan.


1
Bagaimana saya bisa memuat konten dari div ANOTHER, pada halaman yang sama, ke dalam # content-container?
Oliver 'Oli' Jensen

2
@ Oliver 'Oli' Jensen, seperti ini:$('#content-container').html($('#someOtherDivId').html());
Darin Dimitrov

Terima kasih Tuhan! Saya menyadari bahwa #div tidak dapat diubah oleh .val (); fungsi sebagai gantinya, kita harus menggunakan .html (); fungsi untuk membuatnya bekerja! : D @cuSK terima kasih
gumuruh

hidup saver @DarinDimitrov
bersemangatmicrobe

14

Ada 2 fungsi jQuery yang ingin Anda gunakan di sini.

1) click. Ini akan mengambil fungsi anonim sebagai parameter tunggalnya, dan akan mengeksekusinya saat elemen diklik.

2) html. Ini akan mengambil string html sebagai parameter tunggalnya, dan akan mengganti konten elemen Anda dengan html yang disediakan.

Jadi, dalam kasus Anda, Anda ingin melakukan hal berikut:

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

Jika Anda hanya ingin menambahkan konten ke div Anda, daripada mengganti semua isinya, Anda harus menggunakan append:

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

Jika Anda ingin link baru yang ditambahkan juga menambahkan konten baru saat diklik, Anda harus menggunakan delegasi acara :

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

5
$('a').click(function(){
 $('#content-container').html('My content here :-)');
});

2

Anda dapat mencoba hal yang sama dengan replacewith ()

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

The .replaceWith()Metode menghilangkan konten dari DOM dan sisipan konten baru di tempatnya dengan satu panggilan.


1

Coba ini untuk Mengubah konten div menggunakan jQuery.

Lihat selengkapnya @ Ubah konten div menggunakan jQuery

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

        // Setting the Div content
        $(".output").text(currentText);
    });
});

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.