0

我正在设计一个食谱网站，但我被困在这个问题上。

我正在尝试将 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: 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：我相信我需要为列表中的每个食谱创建一个新按钮。我只是不知道如何使用 djangos 标记语言来允许这样做，同时将 css 和 html 与 django 站点分开。由于我每页分页 6 个对象，我想我可以以某种方式命名 6 个按钮中的每一个，以对应于占据该位置的任何配方

4

1 回答 1

0

网页的 DOM 中不应有少数具有相同 ID 的元素。您应该制作不同的 ID（例如，使用{{ forloop.counter }}）或使用类（这是您的情况，恕我直言）。因此，将一个类而不是 ID 附加到每个元素并在您的 JS 中引用该类。

于 2012-04-11T03:06:38.403 回答