文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >jquery从html templatetag获取项目的django templatetags

问jquery从html templatetag获取项目的django templatetags
EN

Stack Overflow用户
提问于 2016-10-07 14:08:08
回答 1查看 66关注 0票数 0

我有我正在工作的这个网站的相册，并且使用jquery按国家/城市进行过滤。如果我在每个国家硬编码到jquery中，我就会得到我想要的结果。我显然不想这样做。下面是我所说的意思。

代码语言：javascript
运行
复制
<div class="container">
    <div class="photo-title">
        <h1>Welcome to Our Photo Album</h1>
    </div>
    <div class="col-sm-12 photoalbum-buttons">

        <div class="dropdown form-actions">
            <button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                By Country
            </button>
            <ul class="dropdown-menu">
                <li><button id="all_countries" value="all_countries">All Countries</button></li>
                {% for obj in object_list %}
                    <li><button id="{{ obj.country }}" value="{{ obj.country }}">{{ obj.country }}</button></li>
                {% endfor %}
            </ul>
        </div>

        <div class="dropdown form-actions">
            <button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                By City
            </button>
            <ul class="dropdown-menu">
                {% for obj in object_list %}
                    <li><button id="{{ obj.city }}" value="{{ obj.city }}">{{ obj.city }}</button></li>
                {% endfor %}
            </ul>
        </div>

    </div>

    <div id="all-photos-div">
        <div class="dropdown form-actions hidden-div">
            <button id="all_photos" class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                All Photos
            </button>
        </div>
    </div>

    <p id="photo-separator">______________________________________________</p>

    <div class="row">
       <div class="row photo-post">
            {% for obj in object_list %}
                <div class="col-sm-3 country_{{obj.slug}}">
                    <div class="thumbnail">
                        <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="{{ obj.city }}, {{ obj.country }} {% if obj.picture_taken %}| {{ obj.picture_taken }}{% else %}{% endif %}" data-caption="{% if obj.picture_description %}{{ obj.picture_description }}{% else %}{% endif %}" data-image="{{ obj.pictures.url }}" data-target="#image-gallery">
                            <img class="img-responsive pic-height" src="{{ obj.pictures.url }}" alt="Short alt text">
                        </a>
                        <div class="caption photo-description">
                            <p class="photo-location">{{obj.city}}, {{obj.country}}</p>
                            <p class="photo-time">{% if obj.picture_taken %}{{ obj.picture_taken }}{% else %}{% endif %}</p>
                             <p>
                                 <a class="thumbnail btn btn-primary" href="#" type="button" data-image-id="" data-toggle="modal" data-title="{{ obj.city }}, {{ obj.country }} {% if obj.picture_taken %}| {{ obj.picture_taken }}{% else %}{% endif %}" data-caption="{% if obj.picture_description %}{{ obj.picture_description }}{% else %}{% endif %}" data-image="{{ obj.pictures.url }}" data-target="#image-gallery">
                                    View
                                 </a>
                             </p>
                        </div>
                    </div>
                </div>
                {% if forloop.counter|divisibleby:4 %}
                    <div class='col-sm-12'><hr/></div></div><div></div><div class='row'>
                {% endif %}
            {% endfor %}
        </div>
    </div>
...

以及我的jquery来过滤：

代码语言：javascript
运行
复制
$(function(){
    $("div.dropdown.form-actions > ul.dropdown-menu > li > button#Greece").click(function(){
        $("#all-photos-div").show() & $("#all_photos").show();
        $(".country_Greece").show();
        $(".country_Germany").hide();
        $(".country_Scotland").hide();
        $(".country_united_states").hide();
    });
});
$(function(){
    $("div.dropdown.form-actions > ul.dropdown-menu > li > button#Germany").click(function(){
        $("#all-photos-div").show() & $("#all_photos").show();
        $(".country_Germany").show();
        $(".country_Greece").hide();
        $(".country_Scotland").hide();
        $(".country_united_states").hide();
    });
});
$(function(){
    $("div.dropdown.form-actions > ul.dropdown-menu > li > button#Scotland").click(function(){
        $("#all-photos-div").show() & $("#all_photos").show();
        $(".country_scotland").show();
        $(".country_greece").hide();
        $(".country_germany").hide();
        $(".country_united_states").hide();
    });
});
$(function(){
    $("div.dropdown.form-actions > ul.dropdown-menu > li > button#Scotland").click(function(){
        $("#all-photos-div").show() & $("#all_photos").show();
        $(".country_scotland").show();
        $(".country_greece").hide();
        $(".country_germany").hide();
        $(".country_united_states").hide();
    });
});
$(function(){
    $("#all_photos").click(function(){
        $("#all-photos-div").hide() & $("#all_photos").hide();
        $(".country_greece").show();
        $(".country_germany").show();
        $(".country_scotland").show();
        $(".country_united_states").show();
    });
});
$(function(){
    $("#all_countries").click(function(){
        $("#all-photos-div").hide() & $("#all_photos").hide();
        $(".country_greece").show();
        $(".country_germany").show();
        $(".country_scotland").show();
        $(".country_united_states").show();
    });
});

因此，我使用html中的templatetag来获取国家名称和城市名称(尽管我得到的是重复的名称，在这个问题之后我会更正)，但是我正在将国家名称(片段)硬编码到jquery中。我尝试过在jquery中使用templatetag，但是这似乎不起作用。

我的问题是:如何在$("button#{{ country }}").click(function()中捕获过滤器按钮的值.那么在隐藏其他人的同时，也要展示与那个国家的所有照片？我将坚持使用jquery或js，而不是使用ajax。主要是因为我没有足够的时间来学习ajax，不管我听到的是多么简单。下个星期我会调查的。

javascript
jquery
html
django
django-template-filters
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-07 14:17:07

您可以使用ID标记来标识图像块，并给它们提供相同的类名。

因此，如果对button标记和photo-post类进行更改，您的HTML可能会像这样。

代码语言：javascript
运行
复制
<div class="container">
    <div class="photo-title">
        <h1>Welcome to Our Photo Album</h1>
    </div>
    <div class="col-sm-12 photoalbum-buttons">

        <div class="dropdown form-actions">
            <button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                By Country
            </button>
            <ul class="dropdown-menu">
                <li><button id="all_countries" value="all_countries">All Countries</button></li>
                {% for obj in object_list %}
                    <li><button id="{{ obj.country }}" value="{{ obj.country }}">{{ obj.country }}</button></li>
                {% endfor %}
            </ul>
        </div>

        <div class="dropdown form-actions">
            <button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                By City
            </button>
            <ul class="dropdown-menu">
                {% for obj in object_list %}
                    <li><button id="{{ obj.city }}" value="{{ obj.city }}">{{ obj.city }}</button></li>
                {% endfor %}
            </ul>
        </div>

    </div>

    <div id="all-photos-div">
        <div class="dropdown form-actions hidden-div">
            <button id="all_photos" class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                All Photos
            </button>
        </div>
    </div>

    <p id="photo-separator">______________________________________________</p>

    <div class="row">
       <div class="row photo-post">
            {% for obj in object_list %}
                <div class="col-sm-3 country-name-class" id="country_{{obj.slug}}">
                    <div class="thumbnail">
                        <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="{{ obj.city }}, {{ obj.country }} {% if obj.picture_taken %}| {{ obj.picture_taken }}{% else %}{% endif %}" data-caption="{% if obj.picture_description %}{{ obj.picture_description }}{% else %}{% endif %}" data-image="{{ obj.pictures.url }}" data-target="#image-gallery">
                            <img class="img-responsive pic-height" src="{{ obj.pictures.url }}" alt="Short alt text">
                        </a>
                        <div class="caption photo-description">
                            <p class="photo-location">{{obj.city}}, {{obj.country}}</p>
                            <p class="photo-time">{% if obj.picture_taken %}{{ obj.picture_taken }}{% else %}{% endif %}</p>
                             <p>
                                 <a class="thumbnail btn btn-primary" href="#" type="button" data-image-id="" data-toggle="modal" data-title="{{ obj.city }}, {{ obj.country }} {% if obj.picture_taken %}| {{ obj.picture_taken }}{% else %}{% endif %}" data-caption="{% if obj.picture_description %}{{ obj.picture_description }}{% else %}{% endif %}" data-image="{{ obj.pictures.url }}" data-target="#image-gallery">
                                    View
                                 </a>
                             </p>
                        </div>
                    </div>
                </div>
                {% if forloop.counter|divisibleby:4 %}
                    <div class='col-sm-12'><hr/></div></div><div></div><div class='row'>
                {% endif %}
            {% endfor %}
        </div>
    </div>
...

将jquery更改为

代码语言：javascript
运行
复制
$(function(){
    $("div.dropdown.form-actions > ul.dropdown-menu > li > button").click(function(){
        var country = $(this).attr(id);
        $(".country-name.class").hide();
        $("#country_"+country).show();
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39919278

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档