我有這個網站的相冊我正在使用和正在使用jquery按國家/城市過濾。如果我在每個國家硬編碼到jquery中,我會得到我想要的結果。我顯然不想這樣做。以下是我的意思。jquery的django templatetags從html templatetag獲取項目
<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();
});
});
所以,我使用templatetags在html獲得國家名稱和城市名稱(雖然我得到重複,我將改正後這個問題),但我把國家名稱(slu hard)硬編碼到jquery中。我試圖在jQuery中使用templatetags,但是這似乎並沒有工作。
我的問題:如何捕獲$("button#{{ country }}").click(function()
中的篩選器按鈕的值...然後在隱藏其他人的情況下顯示該國家的所有圖片?我將堅持使用jquery或js,而不是使用ajax。主要是因爲我沒有足夠的時間來學習Ajax,無論我聽到多麼簡單。我會在下週看看。