0

オブジェクトのグループのページネーションを行っています。各オブジェクトにはボタンがあり、押すと非表示の div が開き、すべての前に div が表示されます。私がやりたいことは、ポップアップするウィンドウにそのオブジェクトの属性をリストすることですが、JavaScript コードからそのオブジェクトを取得する方法がわかりません。

ここにJavaScriptがあります：

<script type="text/javascript">
    $(document).ready(function(){
        $("#create").click(function(){
            $("#popupContact").load("/cookbook/createrecipe #createform");
        });
        $("#button1").click(function(){
            $("#popupContact").load(load object information for button1);
        });
        $("#button2").click(function(){
            $("#popupContact").load(load object information for button2);
        });
    });
</script>

テンプレートは次のとおりです。

{% block content %}
    {% autopaginate object_list 6 %}
    <div id="object_cont">
            {% for object in object_list %}
        <div id="object">
            <div id="button{{ forloop.counter }}">      
            <h4>{{ object.name }}</h4>
            <h5>{{ object.author }}</h5>
            <h5>Prep Time: {{ object.prep_time }} minutes</h5>
            </div>
        </div>
    {% endfor %}
    </div>
    <div id="popupContact" class="popup">
    <a id="popupContactClose" style="cursor:pointer;float:right;">x</a>
    </div>
    <div id="backgroundPopup">
    </div>  
    {% paginate %}
{% endblock %}

基本的に、ボタン div にネストされているオブジェクトを取得する方法が必要です

ありがとう、スナックフィッシュ

4

1 に答える 1

1

まず、マークアップにより、有効な HTML ではない重複した ID パラメータ「オブジェクト」が生成されます。ただし、ボタンごとに個別のクリック ハンドラーを記述する必要はありません。

$('.button').click(function(){
    /* Do whatever with content */
});

jQuery の load メソッドは GET リクエストを行います。そのため、動的に呼び出す URL を取得する必要がある場合は、読み込む URL を保持するボタン div のどこかにアンカー タグを追加することをお勧めします。

{% for object in object_list %}
    <div class="object">
        <div class="button{{ forloop.counter }}">
            <a href="{% url my_view object.property %}" style="display: none;"></a>   
            <h4>{{ object.name }}</h4>
            <h5>{{ object.author }}</h5>
            <h5>Prep Time: {{ object.prep_time }} minutes</h5>
        </div>
    </div>
{% endfor %}

$('.button').click(function(){
    var content = $.load($(this).children('a:first').attr('href'));
    /* Do whatever with content */
});

覚えておくべきもう1つのことは、必要のないヘッダータグを使用しないことです。単に必要なプレゼンテーションを取得するためです。それがスパンタグであり、CSSはそのためのものです:)

それがあなたを助けることを願っています。

于 2012-04-22T05:28:07.260 に答える