1

A、B、Cの3つのリストがあります。Aはチェックボックスフィルターのリストです。B & C は動的結果セットです。既存の JS は A と B でうまく機能します。C を追加しようとしていますが、うまく動作しません。

私の考えは、それらに同じrelを与え、同じコントロールを使用して両方のリストの要素を表示/非表示にすることでした:

rel = "x" のチェックボックスがリスト A でチェックされている場合、一致する rel を持つ要素をリスト B (うまく機能) とリスト 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」を使用）、上記のようにチェックボックスがオンになったときに実行されます。

私が考えたのは、このスクリプトに 2 番目を $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 内の個人に対処していると思いますが、どのチェックボックスがオンになっているかに関係なく、各スパンは非表示になります。

EDIT : これは、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 条件は、フィルタリングの前に、必要な初期結果セットを提供します。フィルターで使用するために、リスト C に代替の値のセットを、再び共通の rel で設定する else があります。

任意の入力をいただければ幸いです。投稿したい別のコード セグメントがある場合はお知らせください。

どうもありがとう。

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 に答える