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>
Odpowiedzi:
Możesz zapisać się na zdarzenie .click dla linków i zmienić zawartość div za pomocą
.html
metody:$('.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ę
.delegate
metodzie dołączania modułu obsługi.źródło
$('#content-container').html($('#someOtherDivId').html());
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(); });
źródło
$('a').click(function(){ $('#content-container').html('My content here :-)'); });
źródło
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.źródło
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); }); });
źródło
Próbować
$('#score_here').html=total;
źródło