Javascript 在jquery中，选中公共“rel”复选框以显示两个不同的列表

我有三个列表，A、B和C。A是复选框过滤器的列表。B&C是动态结果集。现有的JS与A&B配合得很好。我正在尝试添加C，但很难让它正常工作

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

如果在列表A中选中了rel=x的复选框，则显示列表B中具有匹配rel的元素工作正常，而列表C中的元素目前失败

编辑：在下面的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中的所有元素都会重新出现

列表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，以便与过滤器一起使用

如有任何意见，将不胜感激。请让我知道，如果有另一段代码，你想张贴

---

非常感谢。

看起来复选框上的rel必须与列表C span上的类匹配

以下代码抓住复选框上的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>';

到

---

谢谢freak3dot，这让它为一个复选框工作。如果未选中任何项，则所有项都将显示；如果选中多个项，则所有项都将消失。还有什么想法吗？我的目标是列表A中的任何复选框显示在列表C中。建议@freak3dot使事情以非此即彼的方式进行。列表C需要添加，列表A中的任何内容都在列表C中显示。我真的可以用手修改它，请看一下，以了解最终草案的工作原理和原因。

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