Hide data-id on load and Show On Click of A Button

Question

I currently have an image gallery with a filtering capability which is in Wordpress. Each image in the gallery possesses a data-id (eg data-id="id-148").

I'd like to ask help on how to code on jQuery. I hope to have a multiple set of data-ids to be removed (or hidden) when the website loads then when I click on certain buttons (a href) with specific Class, these data-ids will then be showed.

Let's say onLoad the images with data ids: 148, 149, 150 will be hidden then onClick of a button with a particular class class="Apples" then 148 will show. If I click button with class="Orange" then data-id 149 will show. When I click class="All" the data-idsmentioned above will be hidden again.

The image is located in a list-item as such:

<li class="one-third column" data-id="id-148" data-type="Apples">        

Hope to have some help. Thank you so much.

Answer 1

Hope you get some enlightenment from this:

$(document).ready(function(){
   $("some_button").click(function(){
     // Get data-* value using data();
     var dataAttribute = $(this).data("attribute");
       if(dataAttribute == "Apples")
         $("li[data-id='148']").show();
   });
});

References:

Find an element with a specific data attribute jQuery

Answer 2

$(document).ready(function(){
   $('body').on('click','.mybutton', function(){
     var att = $(this).class();
     $("li[data-type ="+att+"]").hide();
   });
});

This is untested but will match the data-type against the data-attribute

Edit: Changed to take class from button