將過濾器中的內容添加到基於同位素的網站

我創建了一個使用同位素的網站，並且在單擊某個過濾器時添加項目時遇到問題。將過濾器中的內容添加到基於同位素的網站

這是劇本我使用的過濾：

<script type="text/javascript"> 
    // cache container 
    var $container = $('#container'); 
    // initialize isotope 
    $container.isotope({ 
     filter: '.front' 
    }); 

    // filter items when filter link is clicked 
    $('#filters a').click(function() { 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ filter: selector }); 
     return false; 
    }); 
</script>

這完美的作品，但我有添加或取消隱藏內容的麻煩，

我已經嘗試此http://jsfiddle.net/RRgjD/適應我的代碼，但我用javascript並不是很好，並且保持平躺在我的臉上。

下面是我使用的html的一個例子。

<li><a href="#filter" data-filter=".identity, .menufilter">&mdash; Brand Identity</a></li> 
<li><a href="#filter" data-filter=".guidelines, .menufilter">&mdash; Brand Guidelines</a></li> 
<li><a href="#filter" data-filter=".photography, .menufilter">&mdash; Brand Photography</a></li> 
<li><a href="#filter" data-filter=".digital, .menufilter">&mdash; Digital</a></li> 


<div class="item cols-1 rows-1 identity"> 
    <span class="new-wrapper"> 
     <div class="post-thumb clearfix"> 
      <a title="Eternal friendship" href="#"> 
       <img src="images/thumbs/oxford.jpg" alt="brain" width="200" height="133"/> 
      </a> 
     </div> 
     <a href="#"><span> 
      <h2></h2> 
      <p> 
       <p></p> 
      </p> 
     </span></a> 
    </span> 
</div>

任何幫助或方向將是輝煌的。我也研究過使用同位素的插入方法，但它遠高於我的頭，我甚至不知道從哪裏開始。

在此先感謝！

編輯：

這開始過濾.front類，但其他類的過濾不起作用：

<script type="text/javascript"> 

$(function() { 

var $container = $('#container'), 
    $checkboxes = $('#filters a'); 

$container.isotope({ 
    itemSelector: '.item' 
}); 

$container.isotope({ 
    filter: '.front' 
}); 

$checkboxes.change(function() { 
    var filters = []; 
    // get checked checkboxes values 
    $checkboxes.click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 
    return false; 
    }); 
    // ['.red', '.blue'] -> '.red, .blue' 
    filters = filters.join(', '); 
    $container.isotope({ 
     filter: filters 
    }, function($changedItems, instance) { 
     instance.$allAtoms.filter('.isotope-hidden').removeClass('is-filtered'); 
     instance.$filteredAtoms.addClass('is-filtered'); 
    }); 
}); 
}); 
</script>

來源

2012-12-03 user1873142

PS。過濾器：腳本的'.front'部分是試圖通過隱藏其他所有內容來過濾我想要顯示的內容的一部分。謝謝 – user1873142

它會幫助人們回答，如果你創建一個你自己的jsfiddle –

我不明白你的問題在哪裏？當你點擊一個鏈接時，它應該使用指定的數據屬性進行重新過濾（順便說一句，你應該使用'$（this）.data（「filter」）'來檢索數據）... –

申請你想在啓動時要顯示的類filter：

$container.isotope({ 
    filter: '.guidelines, .photography' 
});

此示例顯示了您的兩個類別在啓動時。 jsFiddle

，可以破壞功能的其他事情是凌亂的HTML/CSS（動畫，可見/隱藏要素等）

來源

2013-01-28 10:21:15 PHearst

將過濾器中的內容添加到基於同位素的網站

回答

相關問題