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

Question

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> 

Answer 1

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

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

Lưu ý tuy nhiên rằng nếu bạn thay thế nội dung này div nhấp xử lý mà bạn đã chỉ định sẽ bị hủy. Nếu bạn định tiêm một số phần tử DOM mới bên trong div mà bạn cần đính kèm các trình xử lý sự kiện, các tệp đính kèm này phải đượ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 gốc của sự kiện được giữ nguyên, bạn cũng có thể xem phương thức .delegate để đính kèm trình xử lý.

Answer 2

Có 2 chức năng jQuery mà bạn sẽ muốn sử dụng tại đây.

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

2) html. Thao tác này sẽ lấy 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 để div của bạn, chứ không phải là thay thế tất cả mọi thứ trong nó, 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 thứ e liên kết mới được thêm vào cũng để thêm nội dung mới khi nhấn vào, bạn nên sử dụng event delegation:

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

Answer 3

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

Answer 4

Hãy thử $('#score_here').html=total;

Answer 5

Bạn có thể thử cùng 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; 
}); 

Phương pháp .replaceWith() xóa nội dung khỏi DOM và chèn nội dung mới vào vị trí của nó bằng một cuộc gọi.