2016-10-07 55 views
0

我有這個網站的相冊我正在使用和正在使用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,無論我聽到多麼簡單。我會在下週看看。

回答

1

你可以使用ID標籤來識別你的圖像塊並給它們相同的類名。

因此,您的HTML可能看起來像這樣,並且對button標記和photo-post類進行了更改。

<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(); 
});