Изменить содержимое div - jQuery

89

Как можно изменить содержимое этого 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>
Оливер 'Оли' Дженсен
источник
аналогичный вопрос для ссылки: stackoverflow.com/questions/1309452/…
Gurjot kaur

Ответы:

156

Вы можете подписаться на событие .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, к которым вам нужно прикрепить обработчики событий, эти вложения должны выполняться внутри обработчика .click после вставки нового содержимого. Если исходный селектор события сохраняется, вы также можете взглянуть на .delegateметод присоединения обработчика.

Дарин Димитров
источник
1
Как я могу затем загрузить контент из ДРУГОГО div на той же странице в # content-container?
Оливер 'Оли' Дженсен
2
@Oliver 'Oli' Jensen, вот так:$('#content-container').html($('#someOtherDivId').html());
Дарин Димитров
слава Богу! Я понял, что #div нельзя изменить с помощью .val (); вместо этого мы должны использовать .html (); функции для работы! : D @cuSK спасибо
gumuruh
live saver @DarinDimitrov
возбужденный микроб,
14

Здесь вы захотите использовать 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();
});
Джозеф Зильбер
источник
5
$('a').click(function(){
 $('#content-container').html('My content here :-)');
});
Йорген
источник
2

Вы можете попробовать то же самое с помощью 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 и вставки нового контента на своем месте с помощью одного вызова.

Манодж Кадолкар
источник
1

Попробуйте изменить содержимое 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);
    });
});
Джонатан Клевин
источник
-1

Пытаться $('#score_here').html=total;

Санджай Девараджан
источник