Thay đổi nội dung của div - jQuery

Làm cách nào để thay đổi nội dung của div này, khi một trong các LINKS được nhấp?

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

Bạn có thể đăng ký sự kiện .click cho các liên kết và thay đổi nội dung của div bằng .htmlphương pháp:

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

Tuy nhiên, lưu ý rằng nếu bạn thay thế nội dung của div này, trình xử lý nhấp chuột mà bạn đã gán sẽ bị hủy. Nếu bạn định đưa một số phần tử DOM mới vào bên trong div mà bạn cần đính kèm trình xử lý sự kiện, thì phần đính kèm này sẽ được thực hiện bên trong trình xử lý .click sau khi chèn nội dung mới. Nếu bộ chọn ban đầu của sự kiện được giữ nguyên, bạn cũng có thể xem .delegatephương pháp đính kèm bộ xử lý.

Có 2 hàm jQuery mà bạn muốn sử dụng ở đây.

1) click. Điều này sẽ lấy một hàm ẩn danh làm tham số duy nhất của nó và sẽ thực thi nó khi phần tử được nhấp vào.

2) html. Điều này sẽ lấy một chuỗi html làm tham số duy nhất và sẽ thay thế nội dung của phần tử của bạn bằng html được cung cấp.

Vì vậy, trong trường hợp của bạn, bạn sẽ muốn làm như sau:

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

Nếu bạn chỉ muốn thêm nội dung vào div của mình, thay vì thay thế mọi thứ trong đó, bạn nên sử dụng append:

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

Nếu bạn muốn các liên kết mới được thêm vào cũng thêm nội dung mới khi được nhấp vào, bạn nên sử dụng ủy quyền sự kiện :

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

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

Bạn có thể thử tương tự với 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;
});

Các .replaceWith()phương pháp loại bỏ nội dung từ DOM và chèn nội dung mới vào chỗ của nó với một cuộc gọi duy nhất.

Hãy thử điều này để Thay đổi nội dung của div bằng jQuery.

Xem thêm @ Thay đổi nội dung của div bằng jQuery

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

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

Thử $('#score_here').html=total;