0

私はクックブックのウェブサイトをデザインしていますが、この 1 つの問題に悩まされています。

私はdjangoのページネーションをこのスムーズなポップアップjqueryプラグインと組み合わせようとしています:

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

コンテンツをロードすると、最初のレシピ ボタンのみがポップアップ ウィンドウをアクティブにし、クリックしたレシピが表示されます。これは、ボタン オブジェクトのインスタンスが 1 つしかなく、それが最初のレシピに割り当てられているためだと思います (コード スニペットを参照)。 ) ページ分割された結果

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

関連するコードのブロック コンテンツは次のとおりです。

改訂されたテンプレート: これは機能するようになりました

{% 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: リスト内のレシピごとに新しいボタンを作成する必要があると思います。cssとhtmlをdjangoサイトから分離したまま、djangosタグ言語を使用してこれを許可する方法がわかりません。ページごとに 6 つのオブジェクトをページ化するので、その場所を占めるレシピに対応するように 6 つのボタンのそれぞれに何らかの名前を付けることができると考えました。

4

1 に答える 1

0

WebページのDOMに同じIDを持つ要素が少なくないようにする必要があります。別のIDを作成する（たとえば、を使用する{{ forloop.counter }}）か、クラスを使用する必要があります（これは、IMHOの場合です）。したがって、IDの代わりにクラスを各要素にアタッチし、JSでそのクラスを参照します。

于 2012-04-11T03:06:38.403 に答える