Django-jqueryのポップアップウィンドウは、1つのボタン（6の）にアサインされます

Question

基本的には、私は料理本のWebサイトを設計しています。

私はこのなめらかなポップアップjQueryプラグインでDjangoのページネーションを組み合わせることをしようとしています：http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

私は最初のレシピ]ボタンコンテンツをロード

は、ポップアップウィンドウをアクティブにし、あなたがクリックしたどんなレシピが表示されます これは、ボタンオブジェクトのインスタンスが1つしかなく、ページされた結果の最初のレシピ（コードスニペットを参照）に割り当てられているためです。

複数のボタンを許可するようにコードを変更するにはどうすればよいですか？

改訂テンプレート：ここ

は、関連するコードのブロックコンテンツである

/***************************/ 
//@Author: Adrian "yEnS" Mato Gondelle 
//@website: www.yensdesign.com 
//@email: yensamg@gmail.com 
//@license: Feel free to use it, but keep this credits please!     
/***************************/ 

//SETTING UP OUR POPUP 
//0 means disabled; 1 means enabled; 
var popupStatus = 0; 

//loading popup with jQuery magic! 
function loadPopup1(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#popupContact1").fadeIn("slow"); 

     popupStatus = 1; 
    } 
} 
function loadPopup2(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#popupContact2").fadeIn("slow"); 

     popupStatus = 1; 
    } 
} 
function loadPopup3(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#popupContact3").fadeIn("slow"); 

     popupStatus = 1; 
    } 
} 
function loadPopup4(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#popupContact4").fadeIn("slow"); 

     popupStatus = 1; 
    } 
} 
function loadPopup5(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#popupContact5").fadeIn("slow"); 

     popupStatus = 1; 
    } 
} 
function loadPopup6(){ 
    //loads popup only if it is disabled 
    if(popupStatus==0){ 
     $("#backgroundPopup").css({ 
      "opacity": "0.7" 
     }); 
     $("#backgroundPopup").fadeIn("slow"); 
     $("#popupContact6").fadeIn("slow"); 

     popupStatus = 1; 
    } 
} 
//disabling popup with jQuery magic! 
function disablePopup1(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("slow"); 
     $("#popupContact1").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 
function disablePopup2(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("slow"); 
     $("#popupContact2").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 
function disablePopup3(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("slow"); 
     $("#popupContact3").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 
function disablePopup4(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("slow"); 
     $("#popupContact4").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 
function disablePopup5(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("slow"); 
     $("#popupContact5").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 
function disablePopup6(){ 
    //disables popup only if it is enabled 
    if(popupStatus==1){ 
     $("#backgroundPopup").fadeOut("slow"); 
     $("#popupContact6").fadeOut("slow"); 
     popupStatus = 0; 
    } 
} 
//centering popup 
function centerPopup1(){ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("body").height(); 
    var popupWidth = $("body").width(); 
    //centering 
    $("#popupContact1").css({ 
     "position": "absolute", 
     "top": windowHeight/2-popupHeight/2, 
     "left": windowWidth/2-popupWidth/2 
    }); 
    //only need force for IE6 

    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 

} 
function centerPopup2(){ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("body").height(); 
    var popupWidth = $("body").width(); 
    //centering 
    $("#popupContact2").css({ 
     "position": "absolute", 
     "top": windowHeight/2-popupHeight/2, 
     "left": windowWidth/2-popupWidth/2 
    }); 
    //only need force for IE6 

    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 

} 
function centerPopup3(){ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("body").height(); 
    var popupWidth = $("body").width(); 
    //centering 
    $("#popupContact3").css({ 
     "position": "absolute", 
     "top": windowHeight/2-popupHeight/2, 
     "left": windowWidth/2-popupWidth/2 
    }); 
    //only need force for IE6 

    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 

} 
function centerPopup4(){ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("body").height(); 
    var popupWidth = $("body").width(); 
    //centering 
    $("#popupContact4").css({ 
     "position": "absolute", 
     "top": windowHeight/2-popupHeight/2, 
     "left": windowWidth/2-popupWidth/2 
    }); 
    //only need force for IE6 

    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 

} 
function centerPopup5(){ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("body").height(); 
    var popupWidth = $("body").width(); 
    //centering 
    $("#popupContact5").css({ 
     "position": "absolute", 
     "top": windowHeight/2-popupHeight/2, 
     "left": windowWidth/2-popupWidth/2 
    }); 
    //only need force for IE6 

    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 

} 
function centerPopup6(){ 
    //request data for centering 
    var windowWidth = document.documentElement.clientWidth; 
    var windowHeight = document.documentElement.clientHeight; 
    var popupHeight = $("body").height(); 
    var popupWidth = $("body").width(); 
    //centering 
    $("#popupContact6").css({ 
     "position": "absolute", 
     "top": windowHeight/2-popupHeight/2, 
     "left": windowWidth/2-popupWidth/2 
    }); 
    //only need force for IE6 

    $("#backgroundPopup").css({ 
     "height": windowHeight 
    }); 

} 
//CONTROLLING EVENTS IN jQuery 
$(document).ready(function(){ 
    //LOADING POPUP 
    //Click the button event! 
    $("#button1").click(function(){ 
     //centering with css 
     centerPopup1(); 
     //load popup 
     loadPopup1(); 
    }); 
    $("#button2").click(function(){ 
     //centering with css 
     centerPopup2(); 
     //load popup 
     loadPopup2(); 
    }); 
    $("#button3").click(function(){ 
     //centering with css 
     centerPopup3(); 
     //load popup 
     loadPopup3(); 
    }); 
    $("#button4").click(function(){ 
     //centering with css 
     centerPopup4(); 
     //load popup 
     loadPopup4(); 
    }); 
    $("#button5").click(function(){ 
     //centering with css 
     centerPopup5(); 
     //load popup 
     loadPopup5(); 
    }); 
    $("#button6").click(function(){ 
     //centering with css 
     centerPopup6(); 
     //load popup 
     loadPopup6(); 
    });     
    //CLOSING POPUP 
    //Click the x event! 
    $("#popupContactClose1").click(function(){ 
    disablePopup1(); 
}); 
    $("#popupContactClose2").click(function(){ 
    disablePopup2(); 
}); 
    $("#popupContactClose3").click(function(){ 
    disablePopup3(); 
}); 
    $("#popupContactClose4").click(function(){ 
    disablePopup4(); 
}); 
    $("#popupContactClose5").click(function(){ 
    disablePopup5(); 
}); 
    $("#popupContactClose6").click(function(){ 
    disablePopup6(); 
}); 
    //Click out event! 
    $("#backgroundPopup").click(function(){ 
     disablePopup(); 
    }); 
    //Press Escape event! 
     $(document).keypress(function(e){ 
     if(e.keyCode==27 && popupStatus==1){ 
      disablePopup1(); 
     } 
    }); 
     $(document).keypress(function(e){ 
     if(e.keyCode==27 && popupStatus==1){ 
      disablePopup2(); 
     } 
    }); 
     $(document).keypress(function(e){ 
     if(e.keyCode==27 && popupStatus==1){ 
      disablePopup3(); 
     } 
    }); 
     $(document).keypress(function(e){ 
     if(e.keyCode==27 && popupStatus==1){ 
      disablePopup4(); 
     } 
    }); 
     $(document).keypress(function(e){ 
     if(e.keyCode==27 && popupStatus==1){ 
      disablePopup5(); 
     } 
    }); 
     $(document).keypress(function(e){ 
     if(e.keyCode==27 && popupStatus==1){ 
      disablePopup1(); 
     } 
    }); 

}); 

tldr：：私は私が作成する必要があると信じて、これは今

{% block content %} 
    {% autopaginate recipe_list 6 %} 
     <div id="recipe_cont"> 
     {% for recipe in recipe_list %} 
     <div id="recipe"> 
      <img src="{{ STATIC_URL }}chicknbraw.jpg" alt="" height="30" width="30" style=display:"inline"; /> 
      <div id="button{{ forloop.counter }}"><input type="submit" value="View" /></div>   
      <h4>{{ recipe.name }}</h4></a> 
      <h5>{{ recipe.author}}</h5> 
      <h5>Prep Time: {{ recipe.prep_time }} minutes</h5> 
      <h6><a href="/addrecipe/{{ recipe.id }}">Add Recipe</a> 
      <a href="/removerecipe/{{ recipe.id }}">Remove Recipe</a></h6> 
      <div id="popupContact{{ forloop.counter }}"> 
       <a id="popupContactClose{{ forloop.counter }}" style="cursor:pointer;float:right;">x</a> 
       <h1>{{ recipe.name }}</h1> 
       <h3>{{ recipe.author }}</h3> 
       <p id="contactArea"> 
        Ingredients: {{ recipe.ingredients }} 
        <br/><br/> 
        Steps: {{ recipe.steps }} 
       </p> 
      </div> 
      <div id="backgroundPopup"></div>   
     </div> 
     {% endfor %} 
     </div> 
     <div id="col2-footer"> 
     {% paginate %} 
     <p id="recipe_order_text"> order by: <a href="/account/ordered/name">abc</a>|<a href="/account/ordered/date">date</a> 
     </div> 

    {% endblock %} 

改訂jqueryのを動作しますリスト内の各レシピの新しいボタン。私はちょうどdjangosタグ言語を使用してこれを許可して、cssとhtmlをdjangoサイトから分離したままにしておく方法を知らない。私は、ページごとに6つのオブジェクトをpageinateので、私は何とかその場所にあなたたちは

持つ任意の助け

感謝を占有されているもののレシピに対応する6つのボタンのそれぞれに名前を付けることができると思いました。 Cooper reid

Answer 1

ウェブページのDOM内に同じIDを持つ要素が少なくてすべきではありません。あなたは異なるIDを作成する必要があります（例えば、{{ forloop.counter }}を使用）。またはクラスを使用してください（これはあなたの場合です、IMHO）。ですから、各要素にIDの代わりにクラスを付けてJSのクラスを参照してください。