jQuery，显示两个不同的列表，选中了通用的“rel”复选框

我有三个列表，A，B和C。A 是复选框筛选器的列表。B&C是动态结果集。现有的JS与A&B配合得很好。我正在尝试添加 C，但无法使其工作。

我的想法是给它们相同的rel，并使用相同的控件来显示/隐藏两个列表中的元素：

如果在列表 A 中选中了带有 rel = "x" 的复选框，则在列表 B（效果很好）和列表 C（当前失败）中显示具有匹配 rel 的元素。

编辑：在下面的JS中，$lis是列表B。扇区中的rel属性在列表A和B中，我已经按照建议将其作为一个类添加到C中。

列表 C 现在作为排他性运行，但目标是累加的（在列表 A 中选中的任何内容都显示在那里）。

这是 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");
          });

它在页面加载时运行（使用"document.ready"而不是"delegate"），然后选中复选框，如上所述。

我的想法是将第二个添加到这个脚本中，如$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");
          });

但它似乎不起作用。我得到的是列表 C 中的所有元素在选中复选框时消失，并在取消选中时重新出现。

列表 C 的 HTML/PHP：我相信我正在通过通用的"rel"解决div 中的个人问题，但无论选中哪个复选框，每个跨度都会被隐藏。

编辑：这似乎仅在html是一个列表时才有效，因此更新了以下内容：

    <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>

PHP if 条件在过滤之前为我提供了所需的初始结果集。将有一个 else 将使用一组备用值填充列表 C，再次使用公共 rel，以便与过滤器一起使用。

任何意见将不胜感激。如果您想发布另一段代码，请告诉我。

多谢。

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

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

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

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