jquery - jQuery：根据部分类名显示/隐藏多个元素

Question

我一直试图弄清楚这一点，并认为我需要过滤或查找？但是，我已经经历了很多迭代，仍然无法确定它......

我要完成的工作：

1. 从过滤项下拉列表中选择的选项
2. 获取项目的值并显示 span.item-ii 与值匹配的内部 html
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();
                }
          });
        }
  });
}

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

为了让它工作，你需要做很多工作，你需要了解逻辑是如何工作的。

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

参考我的LIVE DEMO

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

查询：

$('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;
}​