Django的 - jQuery的彈出窗口僅獲得assinged至（6）

所以基本上，我設計了一本食譜網站一個按鈕，我被困在這一個問題。Django的 - jQuery的彈出窗口僅獲得assinged至（6）

我想Django的分頁與此光滑彈出jQuery插件相結合：

http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/

當我加載內容只有第一個配方按鈕激活彈出窗口，它會顯示你點擊任何菜譜這我相信是因爲只有一個按鈕對象的實例，並被分配到分頁結果中的第一個配方（請參閱代碼段）

如何修改代碼以允許多個按鈕？

這裏是相關的代碼塊內容：

修訂的模板：這個現在工作

{% 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：

/***************************/ 
//@Author: Adrian "yEnS" Mato Gondelle 
//@website: www.yensdesign.com 
//@email: [email protected] 
//@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：我相信我需要創建一個列表中每個配方的新按鈕。我只是不知道如何使用djangos標記語言來允許這樣做，同時保持css和html與django網站分開。由於我pageinate每頁6個對象，我想我能以某種方式命名每6個按鍵對應於任何配方佔據這個位置

感謝所有幫助你們有

一個。庫珀·裏德

來源

2012-04-10 snackerfish

應該不會出現在網頁的DOM相同ID幾個要素。你應該讓不同的ID（例如，使用{{ forloop.counter }}）或使用類（這是你的情況，恕我直言）因此，將一個類而不是ID添加到每個元素，並在JS中引用該類。

來源

2012-04-11 03:06:38 ilvar

我想我明白你的意思，但你認爲你可以給我一個簡單的例子 – snackerfish 2012-04-11 06:03:17

謝謝，我能弄明白，我會在編輯中發佈我的新代碼 – snackerfish 2012-04-11 15:34:37

@ilvar嗨！我有一個類似的問題。當我運行我的程序時，我只能看到一個彈出窗口。這是我的代碼[link]（http://jsfiddle.net/3HSjY/23/）。我正在使用Jquery獲取我的數據。我怎樣才能得到所有的彈出窗口？ – bucek 2014-02-04 00:40:54

Django的 - jQuery的彈出窗口僅獲得assinged至（6）

回答

相關問題