javascript - django templatetags 用于 jquery 从 html templatetag 获取项目

Question

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

<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:

$(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 中使用 templatetags 来获取国家/地区名称和城市名称(尽管我收到了重复项，我将在此问题后更正)，但将国家/地区名称(slugs)硬编码到 jquery 中。我尝试过在 jquery 中使用 templatetags，但这似乎不起作用。

我的问题:如何在 $("button#{{ Country }}").click(function()... 中捕获过滤器按钮的值...然后还显示所有图片那个国家，而隐藏其他国家？我会坚持使用 jquery 或 js，而不使用 ajax。主要是因为我没有足够的时间来学习 ajax，无论我听说多么简单。下周我会研究一下。

Answer 1

您可以使用 ID 标签来识别图像 block 并为它们指定相同的类名称。

因此，通过对 button 标记和 photo-post 类进行更改，您的 HTML 可能如下所示。

<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更改为这个

$(function(){
    $("div.dropdown.form-actions > ul.dropdown-menu > li > button").click(function(){
        var country = $(this).attr(id);
        $(".country-name.class").hide();
        $("#country_"+country).show();
});