在加载时隐藏多个图像数据ID并在单击按钮时显示它们

Question

I currently have an image gallery with a filtering capability (Jquery Quicksand) 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 initially 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 of the website, the images with data ids: 148, 149, 150 will be hidden then onClick of a button with a particular class class="show" then data-ids 148, 149, 150 will show. When I click class="All" the data-ids mentioned 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

I just made some dummy element. Check this,

HTML

<ul id="quick-sand">
    <li class="one-third column" data-id="id-148" data-type="a">a</li>
    <li class="one-third column" data-id="id-149" data-type="b">b</li>
    <li class="one-third column" data-id="id-150" data-type="c">c</li>
    <li class="one-third column" data-id="id-151" data-type="d">d</li>
    <li class="one-third column" data-id="id-152" data-type="e">e</li>
    <li class="one-third column" data-id="id-153" data-type="f">f</li>
</ul>
<button class="showli">Show/Hide</button>

JS

var toHide = ['id-148', 'id-152'];
    $('#quick-sand li').each(function () {
        if ($.inArray($(this).attr('data-id'), toHide) >= 0) {
        $(this).hide();
    }
});

$('.showli').on('click', function () {
    $('#quick-sand li').each(function () {
        if ($.inArray($(this).attr('data-id'), toHide) >= 0) {
            $(this).toggle();
        }
    });
});

Check this Fiddle!

This may help you to fix the cause.