如何製作自動過濾畫廊部分？

Question

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-2"> 
    </div> 
    <div class="col-sm-4"> 
     <br><p> Year : 
     <select class="form-control"> 
      <option selected="selected" value="0"> -- Choose Your Preferred Year -- </option> 
      <option value="1"> 2010 </option> 
      <option value="2"> 2011 </option> 
      <option value="3"> 2012 </option> 
     </select value="4"></p> 
     </div> 
     <div class="col-sm-4"> 
     <br><p> Events : 
      <select class="form-control"> 
      <option selected="selected" value="zero"> -- Choose Your Preferred Event -- </option> 
      <option value="one"> Annual Alumni Meet of 2012 Batch </option> 
      <option value="two"> Global Conference 2010 </option> 
      <option value="three"> Nostalgia 1980's </option> 
      <option value="four"> Star Campus 2008 </option> 
      </select></p> 
     </div> 
     <div class="col-sm-2"> 
     </div> 
     </div> 
     <div class="page_content"> 
     <div id="photo_gallery_page" class="page"> 
      <div id="photo_gallery_menu_container"> 
      <ul id="photo_gallery_menu"> 
       <li><a href="gallery-1.php"> Photos </a></li> 
       <li class="active"><a href="gallery.php"><span> Videos </span></a></li> 
      </ul> 
      </div> 
      <div id="photo_gallery_content"> 
      <div id="photo_gallery_pictures_container" class="photo_gallery_pictures_container"><a class="album_anchor" href="/gallery/albums/15"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/392/thumbnails/dsc00603_small.JPG);"> 
       </div> 
       <p class="album_title">Nostalgia</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/16"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/16/thumbnails/636278805_bc50f96aec_o_small.jpg);"> 
       </div> 
       <p class="album_title">Star alumni global conference 2007</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/17"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/18/thumbnails/jn-tata-2015_small.jpg);"> 
       </div> 
       <p class="album_title">Star global conference 2013</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/18"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/17/thumbnails/iisc-aana-2013-2_small.jpg);"> 
       </div> 
       <p class="album_title">Star Campus </p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/143"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/587/thumbnails/dsc02821_small.JPG);"> 
       </div> 
       <p class="album_title">Star Global Alumni Conference 2015</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/356"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/16/thumbnails/636278805_bc50f96aec_o_small.jpg);"> 
       </div> 
       <p class="album_title">Nostalgia-1980s</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/362"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/362/thumbnails/100-0019_img_small.JPG);"> 
       </div> 
       <p class="album_title">StarAANA Formative Years</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/392"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/392/thumbnails/dsc00603_small.JPG);"> 
       </div> 
       <p class="album_title">Celebration @ Star</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/406"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/406/thumbnails/felicitation_small.jpg);"> 
       </div> 
       <p class="album_title">Felicitation of Prof. Selvarajan &amp; Mrs. Indira Devi for their generous contribution</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/456"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/456/thumbnails/20160122_153021_small.jpg);"> 
       </div> 
       <p class="album_title">StarAANA: Faculty and Student Visits</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/587"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/587/thumbnails/dsc02821_small.JPG);"> 
       </div> 
       <p class="album_title">Panel Discussion on: "Entrepreneurship or Employment: What governs the Choice?"</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/1859"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/1859/thumbnails/excellence-award-2005_small.jpg);"> 
       </div> 
       <p class="album_title">Star Gifts</p> 
       </div> 
      </a> 
      <a class="album_anchor" href="/gallery/albums/1931"> 
       <div class="picture album"> 
       <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/1931/thumbnails/509536602_3d28eb1156_o_small.jpg);"> 
       </div> 
       <p class="album_title">Chemeng 2005-2007</p> 
       </div> 
      </a></div> 
      <p class="cB"></p> 
      <div id="loading" style="display: none;"> 
       <img src="/static/img/loading.gif"> 
      </div> 
      <div id="gallery_done"> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 

上面給出的是我的html代碼..在這裏我給了2個過濾器選項（即）按年過濾和按事件過濾。當用戶從相應的選擇框中選擇特定年份或事件時，圖像必須相應地自動進行過濾，並且最終結果應該按照該過濾器顯示。爲此，我應該怎麼做才能得到它？請給我一個正確的解決方案..

Answer 1

這是一個非常廣泛的問題。

基本上，您有兩種選擇：在客戶端進行篩選或在服務器端進行篩選。

也許這個html是建立在使用來自數據庫的數據的服務器上的。在這種情況下，您必須過濾服務器上的列表。更改選擇列表必須向選定參數的服務器發送請求，併發回新的相冊列表。您在這裏仍然有兩個選項：整頁重載或使用Ajax。

如果你想做一切客戶端，你的代碼會錯過重要的信息。您必須將其添加到相冊的代碼中。

你怎麼知道這是哪年或什麼事件？

<a class="album_anchor" href="/gallery/albums/392"> 
     <div class="picture album"> 
      <div class="pictue_album_thumbnail" style="background-image:url(https://ab-prod-media-assets.s3.amazonaws.com/234/alumsite/photo_gallery/392/thumbnails/dsc00603_small.JPG);"> 
      </div> 
      <p class="album_title">Celebration @ Star</p> 
     </div> 
</a> 

您必須將數據包含在某處。再次有很多方法可以做到這一點。例如，您可以使用數據屬性，如下所示：

<a class="album_anchor" href="/gallery/albums/392" 
    data-year="2011" data-event="two"> 

這將允許您使用JavaScript或jQuery進行過濾。

你看，還有很長的路要走。因此，在這個問題上縮小你的問題。按照現狀來看，它太寬泛了，無法得到一個簡潔的答案。