divの内容を変更する-jQuery


89

リンクの1つがクリックされたときに、この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イベントをサブスクライブし、次の.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;
});

ただし、このdivの内容を置き換えると、割り当てたクリックハンドラーが破棄されることに注意してください。イベントハンドラーをアタッチする必要があるdiv内にいくつかの新しいDOM要素を挿入する場合は、新しいコンテンツを挿入した後、このアタッチメントを.clickハンドラー内で実行する必要があります。イベントの元のセレクターが保持されている場合は.delegate、ハンドラーをアタッチするメソッドも確認できます。


1
次に、同じページの別のdivから#content-containerにコンテンツをロードするにはどうすればよいですか?
オリバー 'オリ'ジェンセン

2
@ Oliver'Oli 'Jensen、このように:$('#content-container').html($('#someOtherDivId').html());
Darin Dimitrov

ありがとう神様!#divは.val()では変更できないことに気づきました。代わりに関数、.html();を使用する必要があります。それを機能させるための関数!:D @cuSKありがとう
gumuruh 2015

ライブセーバー@DarinDimitrov
excitedmicrobe

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内のすべてを置き換えるのではなく、コンテンツを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();
});


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回の呼び出しでその場所に新しいコンテンツを挿入します。



弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.