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>
Jawaban:
Anda bisa berlangganan acara .click untuk tautan dan mengubah konten div menggunakan
.html
metode:$('.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
.delegate
metode untuk memasang penangan.sumber
$('#content-container').html($('#someOtherDivId').html());
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(); });
sumber
$('a').click(function(){ $('#content-container').html('My content here :-)'); });
sumber
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.sumber
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); }); });
sumber
Mencoba
$('#score_here').html=total;
sumber