排序按類名HTML元素，但與超過一類

我那裏，我其中包含許多不同的藝術家的藝術家頁面上工作，以投資組合的圖像和一些細節每個藝術家的元素。我想在頁面頂部有按鈕，點擊頁面上的藝術家排序。排序按類名HTML元素，但與超過一類

我給每個藝術家鍵入特定的類，並且在單擊按鈕時特定類型的藝術家進行排序，它隱藏沒有被選擇的類型的所有藝術家。例如：點擊「音樂」，它隱藏所有「攝影」，「電影」和「圖形」的藝術家，只留下顯示的音樂藝術家。

我遇到的問題是一些藝術家都是'音樂'和'攝影'藝術家，當我選擇'音樂'藝術家時，它隱藏了藝術家，因爲他也屬於'攝影'藝術家收藏，它們是因爲音樂藝術家被選中而被隱藏。的HTML

代碼對於每個藝術家元件隱藏特定類的所有HTML元素JS腳本的

 <div class="col-md-4 col-lg-4 musicartist"> 
     <div id="artist1"> 
      <div class="arthov"> 
      <img class="img-circle img-responsive" src="../img/artists/music/Lexxicon.png"> 
      <div id="recentwork"><p><a href="#">View Artist</a><p></div> 
      </div> 
      <p><strong><h3>Lexxicon</h3></strong>R&B | Toronto, ON<br>[email protected]</strong></p> 
     </div> 
     </div>

代碼。

<script> 
function filterMusicArtists() { 
    var appBanners = document.getElementsByClassName('musicartist'), i; 

    for (var i = 0; i < appBanners.length; i ++) { 
     appBanners[i].style.display = 'none'; 
    } 
} 
</script>

在頁面頂部過濾藝術家的按鈕代碼。這將調用所有JS方法來隱藏未選中的其他藝術家類型。

<div class="col-md-2"> 
      <div class="music"> 
      <div class="musicgenre" type="button" onclick="showMusicArtists();filterPhotographyArtists();filterFilmArtists();filterOtherArtists();filterGraphicArtists();filterFashionArtists();">Music</div> 
      </div> 
     </div>

我對HTML和CSS有經驗，雖然我是JS新手。我知道這個過程很可能非常低效且不理想，所以任何幫助都會被讚賞。試圖找出如何展示屬於多種藝術的藝術家！

謝謝！

來源

2016-12-29 Owen Adley

更新您的問題，以包括實際的代碼而不是全屏圖像 – Dekel

@dekel抱歉。我已更新。 –

http://isotope.metafizzy.co/參閱本 –

第一個.hide具有表示未被點擊的類別的類的元素，然後是.show的元素。最終的結果將是所有擁有您點擊課程的藝術家都將被展示。

例如爲：

$('.film, .music').hide(); 
$('.photography').show();

...會顯示誰擁有film和photography類或music和photography兩個類兩位藝術家，但沒有誰只有film或僅music的那些的。

非jQuery的溶液幾乎是一樣簡單。只是document.getElementsByClassName然後設置style.display識別您的元素。

來源

2016-12-29 01:41:14 Vince

這是因爲您想要隱藏除選定的所有藝術家之外的所有藝術家，但您的代碼隱藏了您選擇的藝術家類型。

<script> 
function filterMusicArtists(type) { 

var appBanners = document.getElementsByClassName('artist'); 

for (var i = 0; i < appBanners.length; i ++) { 
    var currentArt = appBanners[i]; 
    if (currentArt.classList.contains(type)) 
    { 
     if (!currentArt.hidden){ 
      currentArt.hidden=true; 
     } 
    } 
    } 
} 
</script>

來源

2016-12-29 02:04:11 serken

排序按類名HTML元素，但與超過一類

回答

相關問題