Question

I have a case where I need to filter by elements and by all means; almost works.

There is a list of colors the user could chose from. More than one color can be selected. Each element can have one or more of these attributes assigned to it.

Attribute Example:

<div data-wotc-color="G">
<div data-wotc-color="B">
<div data-wotc-color="U">
<div data-wotc-color="UB">
<div data-wotc-color="U">
<div data-wotc-color="W">

In JQuery I’m doing this to show/hide by using filter():

$.each($('.colorpicker a'), function() {
    if ($(this).hasClass('selected')) {
            $('.pac').filter('[data-wotc-color*="' + $(this).attr('id') + '"]').show();
        } else {
            $('.pac').filter('[data-wotc-color*="' + $(this).attr('id') + '"]').hide();
        }
    });

Basically what’s happening (as far as I can see) is when you select one element it works to show/hide the element. When selecting more than one it shows/hides properly as long as you select it in the proper order. I know some sort of regex is probably needed here but I’m not entirely sure how to make it happen using JQuery.

Answer 1

The problem is that for each anchor you’re hiding some of the elements that may have already been (legitimately) showing.

Instead, hide everything, and then show the ones for selected colors:

// Hide EVERYTHING
$('.pac').hide();

// Now show everything that matches:
$('.colorpicker a.selected').each(function() {
    $('.pac').filter('[data-wotc-color*="' + $(this).attr('id') + '"]').show();
});