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>
Oliver 'Oli' Jensen
sumber
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.

Darin Dimitrov
sumber
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();
});
Joseph Silber
sumber
5
$('a').click(function(){
 $('#content-container').html('My content here :-)');
});
Jørgen
sumber
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.

Manoj Kadolkar
sumber
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);
    });
});
jonathan klevin
sumber
-1

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

Sanjay Devarajan
sumber