jquery, show two different lists with common 'rel' on checkbox checked

Question

I have three lists, A, B & C. A is a list of checkbox filters. B & C are dynamic results sets. Existing JS works great with A & B. I am trying to add C, and having trouble getting it working.

My thought was to give them the same rel, and use the same controls to show/hide elements in both lists:

If the checkbox with rel = "x" is checked in list A, show the element with the matching rel in list B (works great) and in list C (failing at present).

EDIT : In the JS below, $lis is list B. The rel attribute in the sector is in list A & B, and which I have added to C as a class as suggested.

List C is now functioning as exclusive, but the goal is additive (anything checked in list A shows there).

Here is the JS

    $('div.tags').delegate('input[type=checkbox]', 'change', function()
          {
              var $lis = $('.results > li'),
                  $checked = $('input:checked');

              if ($checked.length)
              {
                  var selector = $checked.map(function ()
                  {
                      return '.' + $(this).attr('rel');
                  }).get().join('');

                  $lis.hide().filter(selector).show();  
                  $("#allFilteredOut").html(($(".filterThis:visible").length === 0)?"No matches found - please adjust filter selections.":"");   
              }
              else
              {
                  $lis.show();
              }
              var numVisible = $('.filterThis:visible').length
              $("#visibleItems span").html(numVisible + " Available");
          });

It runs on page load (with 'document.ready' instead of 'delegate') and then on checkbox checked as above.

My thought was to add the second into this script, as $test:

    $('div.tags').delegate('input[type=checkbox]', 'change', function()
          {
              var $lis = $('.results > li'),
                    $test = $('.testing > span'),
                  $checked = $('input:checked');

              if ($checked.length)
              {
                  var selector = $checked.map(function ()
                  {
                      return '.' + $(this).attr('rel');
                  }).get().join('');

                  $lis.hide().filter(selector).show(); 
                  $test.hide().filter(selector).show();  
                  $("#allFilteredOut").html(($(".filterThis:visible").length === 0)?"No matches found - please adjust filter selections.":"");   
              }
              else
              {
                  $lis.show();
                  $test.show();
              }
              var numVisible = $('.filterThis:visible').length
              $("#visibleItems span").html(numVisible + " Available");

          });

But it doesn't seem to work. What I get is all elements in list C disappear when a checkbox is checked, and reappear when it is unchecked.

The HTML/PHP for list C: I believe I'm addressing the individual inside the div via the common 'rel', but each span gets hidden no matter which checkbox is checked.

EDIT : this only seems to work if the html is a list, so updated the following:

    <ul class="testing">
            <?php if ($catReqType == "category") {
            if (empty($category)) {
                // Market page making category request
                $category = $market;
            } 
                mysql_data_seek($rsCategories,0);
                do {
                  echo '<li class="' . $row_rsCategories['category'] . '">' . $row_rsCategories['nice_cat_name'] . '</li>';

                } while ($row_rsCategories = mysql_fetch_assoc($rsCategories));
              } ?>
        </ul>

The PHP if conditions give me the initial results set I need, prior to the filtering. There will be an else that will populate list C with an alternate set of values, again with the common rel, for use with the filters.

Any input would be appreciated. Please let me know if there's another segment of code you would like posted.

Thanks much.

Answer 1

It looks like the rel on the checkbox has to match the class on the list C span.

The following code grabs the rel on the checkbox and prepends a dot:

var selector = $checked.map(function ()
    {
        return '.' + $(this).attr('rel');
     }).get().join('');

Then, that selector is used later here:

$test.hide().filter(selector).show();

Try changing:

echo '<span rel="' . $row_rsCategories['category'] . '">' . $row_rsCategories['nice_cat_name'] . '</span>';

to

echo '<span class="' . $row_rsCategories['category'] . '">' . $row_rsCategories['nice_cat_name'] . '</span>';