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

首先，您的标记将导致重复的 id 参数“object”，它不是有效的 HTML。但是，无需为每个按钮编写单独的单击处理程序：

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

jQuery 的 load 方法发出一个 GET 请求。因此，如果您需要动态调用 URL，我建议在按钮 div 中的某处添加一个锚标记，以保存要加载的 URL。

{% 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 */
});

要记住的另一件事是不要在不需要的地方使用标题标签，只是为了获得您想要的演示文稿，这就是 span 标签和 CSS 的用途:)

希望对您有所帮助。

于 2012-04-22T05:28:07.260 回答