1

我有三个列表，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，用于过滤器。

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

非常感谢。

4

1 回答 1

0

看起来复选框上的 rel 必须与列表 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>';
于 2013-11-11T20:37:53.383 回答