เปลี่ยนเนื้อหาของ div - jQuery

จะเปลี่ยนเนื้อหาของ div นี้ได้อย่างไรเมื่อคลิกลิงค์ใดลิงค์หนึ่ง

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

คุณสามารถสมัครสำหรับเหตุการณ์. click สำหรับลิงก์และเปลี่ยนเนื้อหาของ div โดยใช้.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;
});

อย่างไรก็ตามโปรดทราบว่าหากคุณแทนที่เนื้อหาของ div นี้ตัวจัดการคลิกที่คุณกำหนดไว้จะถูกทำลาย หากคุณต้องการฉีดองค์ประกอบ DOM ใหม่ภายใน div ที่คุณต้องแนบตัวจัดการเหตุการณ์ควรดำเนินการสิ่งที่แนบนี้ภายในตัวจัดการ. คลิกหลังจากใส่เนื้อหาใหม่แล้ว หากตัวเลือกเดิมของเหตุการณ์ยังคงอยู่คุณสามารถดู.delegateวิธีการแนบตัวจัดการได้

มี 2 ​​ฟังก์ชัน jQuery ที่คุณต้องการใช้ที่นี่

1) click. สิ่งนี้จะใช้ฟังก์ชันที่ไม่ระบุตัวตนเป็นพารามิเตอร์เดียวและจะดำเนินการเมื่อองค์ประกอบถูกคลิก

2) html. สิ่งนี้จะใช้สตริง html เป็นพารามิเตอร์เดียวและจะแทนที่เนื้อหาขององค์ประกอบของคุณด้วย html ที่ให้มา

ดังนั้นในกรณีของคุณคุณจะต้องทำสิ่งต่อไปนี้:

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

หากคุณต้องการเพิ่มเนื้อหาลงใน div ของคุณเท่านั้นแทนที่จะแทนที่ทุกอย่างในนั้นคุณควรใช้append:

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

หากคุณต้องการให้ลิงก์ที่เพิ่มใหม่เพิ่มเนื้อหาใหม่เมื่อคลิกคุณควรใช้การมอบหมายเหตุการณ์ :

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

คุณสามารถลองแบบเดียวกันโดยใช้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;
});

.replaceWith()เนื้อหาวิธีการเอาออกจาก DOM และแทรกเนื้อหาใหม่ในสถานที่ที่มีสายเดียว

ลองทำเช่นนี้เพื่อเปลี่ยนเนื้อหาของ div โดยใช้ jQuery

ดูเพิ่มเติม @ เปลี่ยนเนื้อหาของ div โดยใช้ jQuery

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

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

ลอง $('#score_here').html=total;