How to show/hide markers that are inside a function using js?

Question

I have a map with a lot of markers that are pulled from this function:

function showResourcesByName(name) {
    for (var i = 0; i < markers.resources.length; i++) {
        var resName = markers.resources[i].name;

        if (resName == name) {
            var resIcon = icons.resources[i].icon;
            var resSize = icons.resources[i].size;
            var resPname = icons.resources[i].pname;

            var customIcon = L.icon({
                iconUrl: resIcon,
                iconSize: resSize, // size of the icon
                iconAnchor:   [resSize[0]/2, resSize[1]/2], // point of the icon which will correspond to marker's location
                popupAnchor:  [2, -resSize[1]/2] // point from which the popup should open relative to the iconAnchor
            });

            for (var j = 0; j < markers.resources[i].coords.length; j++) {
                var x = markers.resources[i].coords[j].x;
                var y = markers.resources[i].coords[j].y;

                L.marker([y, x], {icon: customIcon}).addTo(map).bindPopup(resPname);
            }
        }
    }
}

Then I use the code showResourcesByName("AITokarServer"); to show all markers for that selector (AITokarServer) for example.

I have a sidebar with all categories, and want to show/hide markers if I click on that category. For example, if I click animals, I want to show only the markers from the "animals" group. Also I want to put a show/hide selector on each marker group too, if I click on "Shigi" link I want to show only the Shigi markers, that are pulled from this function: showResourcesByName("AIShigiServer");

I trid this example here: http://plnkr.co/edit/LVzmRcsVZ79wZ78E5yBd?p=preview But I don't know how to work with the function that I use and those selectors to show/hide.

And here is my full code with all the files. Each group is commented in the code where are the function that pulls the icons.

http://plnkr.co/edit/dVgHt4VK0DnA30M3a8vq?p=preview

Answer 1

Figured out! Here's how I solved it. Added a class to each marker using their names:

for (var j = 0; j < markers.resources[i].coords.length; j++) {
                                var x = markers.resources[i].coords[j].x;
                                var y = markers.resources[i].coords[j].y;

                                marker = L.marker([y, x], {icon: customIcon});
                                marker.addTo(map).bindPopup(resPname);
                                $(marker._icon).addClass(name)
                            }

Then I hid the markers through css using display none to all markers class. And created a checkbox that show the marker usin js fade in fade out effect:

$(document).ready(function () {
                    $('#markertoggle').change(function () {
                        if (!this.checked) 
                        //  ^
                           $('.MarkerClass').fadeOut('slow');
                        else 
                            $('.MarkerClass').fadeIn('slow');
                    });
                });

It works like a charm! And no need layers!

Answer 2

Another way to do this without messing around with classes and just using the name of the image:

$('.leaflet-pane img[src="images/pin1.png"]').hide();