div-jQueryの内容を変更します

Question

リンクの1つをクリックすると、このdivの内容をどのように変更できますか？あなたがリンクについて.clickイベントにサブスクライブし、.html方法使用して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> 

Answer 1

：

$('.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メソッドを参照してハンドラをアタッチすることもできます。

Answer 2

ここで使用する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(); 
}); 

---

あなたが目をしたい場合eは新しいあなたが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

あなたは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()方法で同じことをしようとすることができ$('#score_here').html=total;

Answer 5

をお試しくださいDOMからコンテンツを削除し、1回の呼び出しで新しいコンテンツをその場所に挿入します。