jqueryを使用して異なるdivをポップアップdivにロードする

Question

私はカスタムIDを使ってさまざまなdivをロードする必要があるポップアップdivを持っています。

たとえば、recipepopup1 recipepopup2とrecipepopup3があり、それぞれにrecipebutton1、recipebutton2 recipeButton3があり、recipeopup1..recipepopup3をrecipe_popupという名前に読み込む別のdivがあります。それはpopupdivにDIV1をロードしますButton1を、私はクリックするとbutton2を、それが今、私はreplaceWith（）を使用していると私がいることを発見したなどrecipe_displayに

をDIV2をロードします私がクリックしたときに私はそれを持つことができますどのように

recipe_pop divのidをrecipepopup1に置き換えます。これは、button1をクリックしたときにrecipe_popup divをクリックするとdivをロードするだけです。

もう1つ注意すべき点は、レシピopupのそれぞれをロードできることです無限に何度も - 私はポップアップを閉じ、既にクリックされているレシピボタンをクリックすると、まだ関連するdivをポップアップされます

任意の助けてくれてありがとう:) ケイティ ここでは私の現在のコードです：。。

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#recipebutton1").click(function(){ 
     $('#create_form_span').css('display', 'none'); 
     $(".recipepopup").css('display','none'); 
     $("#recipe_display").replaceWith($('#recipepopup1').css('display','block')); 
    }); 
    $("#recipebutton2").click(function(){ 
     $('#create_form_span').css('display', 'none'); 
     $(".recipepopup").css('display','none'); 
     $("#recipe_display").replaceWith($('#recipepopup2').css('display','block')); 
    }); 
    $("#recipebutton3").click(function(){ 
     $('#create_form_span').css('display', 'none'); 
     $(".recipepopup").css('display','none'); 
     $("#recipe_display").replaceWith($('#recipepopup3').css('display','block')); 
    }); 

}); 
</script> 

Answer 1

私はあなたが$（ "＃のrecipe_display"）を使用することができると思うのhtml（$（ '＃のrecipepopup2'）HTML（ ））

希望します。