jquery /數據過濾

我試圖根據它們所屬的類別顯示一些圖像。每個圖像都屬於多個類別。我在表示每個類別的圖像上方都有鏈接，並且這個想法是，當人們點擊其中一個鏈接時，該類別中的圖像將被顯示，而其他圖像將被隱藏。jquery /數據過濾

我對分類鏈接下面的代碼：

<a class="cat-title" href="#" data-filter="cat-102">Category name</a> 
<a class="cat-title" href="#" data-filter="cat-2">Category name</a> 
<a class="cat-title" href="#" data-filter="cat-17">Category name</a> 
<a class="cat-title" href="#" data-filter="cat-151>Category name</a>

那麼對於圖片：

<a data-tags="cat-2, cat-3, cat-17, cat-101, cat-102, cat-132, cat-151" href="link"> 
    <img src="src"> 
</a> 
<a data-tags="cat-2, cat-102, cat-151" href="link"> 
    <img src="src"> 
</a>

等

現在的問題是我不知道很多關於jquery，但我試着谷歌尋求幫助。問題是，我需要過濾圖像不僅爲一個標籤，但更多的標籤（以便圖像顯示，如果它所屬的任何類別被選中）。在這種情況下，我無法找到任何示例。

任何幫助表示讚賞！

來源

2015-12-29 joff19

這是不是一個好問題爲StackOverflow。但我仍然想幫助你。看看[MixItUp]（http://mixitup.kunkalabs.com/），他們有你想要的東西。 –

你如何取消選擇類別？通過點擊相同的鏈接？含義：你有鏈接，但也許他們應該是「複選框」按鈕？ – Baerkins

你可以這樣來做：

$('.cat-title').on('click', function (e) { 
    e.preventDefault(); 
    var filter = $(this).data('filter'); 

    $('[data-tags]') 
     .hide() 
     .filter('[data-tags*="' + filter + ',"],[data-tags$="' + filter + '"]') 
     .show(); 
});

https://jsfiddle.net/b2cz2k6a/1/

來源

2015-12-29 16:11:59 Rudi

當貓過濾器將是貓-2時，將過濾貓-21，貓-22，貓-23等。 – CronosS

@CronosS謝謝，更新！ – Rudi

謝謝;我用這個，並得到它的工作，豎起大拇指，沒有意識到它可以這麼容易地完成！ – joff19

使用類而不是data-tags。

<a class="filtered-image cat-2 cat-3 cat-17 cat-101"><img src="src"></a>

然後，當用戶點擊一個過濾器，你可以這樣做：

$(".cat-title").click(function() { 
    $(".filtered-image." + $(this).data("filter")).show(); 
    return false; // Prevent default link action 
});

來源

2015-12-29 15:41:26 Barmar

當你可以做'this.dataset.filter'時，有理由用'$（this）.data（「filter」）創建一個新的jQuery對象？我經常看到這一點。 – CronosS

'。數據（）'緩存數據，解析它作爲JSON等 – Barmar

'。數據（）'也適用於沒有實現'.dataset'瀏覽器版本。 – Barmar

jquery /數據過濾

回答

相關問題