jQuery:基于部分类名显示/隐藏多个元素

Question

我一直在想办法解决这个问题，我觉得我需要筛选还是找到？但是，我经历了很多次迭代，但还是没能确定下来.

我想要完成的事情：

1. 选项从筛选项下拉列表中选择。
2. 获取项的值，并使用匹配值的内部html显示span.itt-ii
3. 从盖子开始上课。
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();
                }
          });
        }
  });
}

Answer 1

我几乎会把选择改为这样

<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();
 });

Answer 2

要使它工作，你需要做大量的工作，你需要了解逻辑是如何工作的。

最后，这就是你需要做的。

请参考我的现场演示

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;
}​