更改 div 的内容 - jQuery

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7139208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 23:27:16  来源:igfitidea点击:

Change content of div - jQuery

jquery

提问by Oliver 'Oli' Jensen

How is it possible to change the content of this div, when one of the LINKS is clicked?

单击链接之一时,如何更改此 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>

回答by Darin Dimitrov

You could subscribe for the .click event for the links and change the contents of the div using the .htmlmethod:

您可以订阅链接的 .click 事件并使用以下.html方法更改 div 的内容:

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

Note however that if you replace the contents of this div the click handler that you have assigned will be destroyed. If you intend to inject some new DOM elements inside the div for which you need to attach event handlers, this attachments should be performed inside the .click handler after inserting the new contents. If the original selector of the event is preserved you may also take a look at the .delegatemethod to attach the handler.

但是请注意,如果您替换此 div 的内容,您分配的点击处理程序将被销毁。如果您打算在需要附加事件处理程序的 div 中注入一些新的 DOM 元素,则应在插入新内容后在 .click 处理程序中执行此附加操作。如果保留了事件的原始选择器,您还可以查看.delegate附加处理程序的方法。

回答by Joseph Silber

There are 2 jQuery functions that you'll want to use here.

这里有 2 个 jQuery 函数您需要使用。

1) click. This will take an anonymous function as it's sole parameter, and will execute it when the element is clicked.

1)click。这将接受一个匿名函数作为它的唯一参数,并在单击元素时执行它。

2) html. This will take an html string as it's sole parameter, and will replace the contents of your element with the html provided.

2)html。这将接受一个 html 字符串作为它的唯一参数,并将用提供的 html 替换元素的内容。

So, in your case, you'll want to do the following:

因此,在您的情况下,您需要执行以下操作:

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


If you only want to addcontent to your div, rather than replacing everything in it, you should use append:

如果您只想向div添加内容,而不是替换其中的所有内容,则应使用append

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


If you want the new added links to also add new content when clicked, you should use event delegation:

如果您希望新添加的链接在点击时也添加新内容,您应该使用事件委托

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

回答by J?rgen

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

回答by Manoj Kadolkar

You can try the same with replacewith()

你可以用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;
});

The .replaceWith()method removes content from the DOM and inserts new content in its place with a single call.

.replaceWith()方法通过一次调用从 DOM 中删除内容并在其位置插入新内容。

回答by jonathan klevin

Try this to Change content of div using jQuery.

尝试使用 jQuery 更改 div 的内容。

See more @ Change content of div using jQuery

查看更多@使用 jQuery 更改 div 的内容

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

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

回答by Sanjay Devarajan

Try $('#score_here').html=total;

尝试 $('#score_here').html=total;