0

私はこれを理解しようとしてきましたが、フィルターまたは検索が必要だと思いますか? しかし、何度も繰り返したのですが、いまだに解決できていません...

私が達成しようとしていること：

  1. フィルタ項目ドロップダウンから選択されたオプション
  2. item の値を取得し、値に一致する内部 html で span.item-ii を表示します
  3. span.item-iiのlid-で始まるクラスを取得
  4. 同じクラスの p.ptext アイテムを表示し、残りを非表示にする

私のマークアップは次のようになります。

<select name="filteritem" id="filteritem">
  <option value="">- Select One-</option>
  <option value="Feliformia"> Feliformia </option>
  <option value="Caniformia">Caniformia</option>
</select>

<span class="item-ii lid-34 bigtitle">Feliformia</span>
<span class="item-ii lid-2 bigtitle">Caniformia</span>

...

<p class="ptext lid-34 moderate-me">Stenoplesictidae</p>
<p class="ptext lid-34 moderate-me">Percrocutidae</p>
<p class="ptext lid-2 moderate-me">Amphicyonidae</p>
<p class="ptext lid-2 moderate-me">Canidae</p>

含める価値があるかどうかはわかりませんが、これまでのところ、これを持っています...（ただし、それをより良くするためのヒントは素晴らしいでしょう...）

  $('select#filteritem').live('change', function() {
        var itemselection = $(this).val();

        if(itemselection == '') {
          $('span.itemii').show();
        } else {
          $('span.itemii').each(function() {
                $(this).hide();
                var itemtext = $(this).html();
                if(itemtext == itemselection) {
                   $(this).show();
                }
          });
        }
  });
}
4

2 に答える 2

0

それを機能させるには、多くの回避策を実行する必要があり、ロジックがどのように機能しているかを理解する必要があります。

最後に、これはあなたがする必要がある方法です。

私のライブデモを参照してください

HTML：

<select name="filteritem" id="filteritem">
  <option value="">-Select One-</option>
  <option value="Feliformia">Feliformia</option>
  <option value="Caniformia">Caniformia</option>
</select>
<br/>
<span class="item-ii lid-34 bigtitle">Feliformia</span>
<span class="item-ii lid-2 bigtitle">Caniformia</span>

...
<br/>
<p class="ptext lid-34 moderate-me">Stenoplesictidae</p>
<p class="ptext lid-34 moderate-me">Percrocutidae</p>
<p class="ptext lid-2 moderate-me">Amphicyonidae</p>
<p class="ptext lid-2 moderate-me">Canidae</p>​

JQuery：

$('select#filteritem').change(function() {
    var itemselection = $(this).val();
    if (itemselection == "") {
        $('span.item-ii').show();
        $('p.ptext').show();
    } else {
        $('span.item-ii').each(function() {
            if (itemselection == $(this).text()) {
                $('span.item-ii').hide();
                $(this).show();
                var classList =$(this).attr('class').split(/\s+/);
                $.each(classList, function(index, item) {
                    if ($('p.ptext').hasClass(item)) {
                        $('p.ptext').hide();
                        $('p.ptext.'+item).show();
                    }
                });
            }
        });
    }
});​

CSS：

.item-ii {
    display:block;
}​
于 2012-07-11T17:37:58.340 に答える
0

私はほとんどselectをこのようなものに変更します

<option value="34"> Feliformia </option>

コードは簡単です

 $('select#filteritem').live('change', function() {
  var itemselection = $(this).val();
  $('.ptext').hide();
  $('span.itemii').hide();
  if(itemselection == '')
     $('span.itemii').show();
  else
     $('.lid-' + itemselection).show();
 });
于 2012-07-11T16:31:33.583 に答える