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

【问题标题】：jQuery: Show / Hide Multiple Elements Based on Partial Class NamejQuery：根据部分类名显示/隐藏多个元素
【发布时间】：2012-07-11 07:54:11
【问题描述】：

我一直在尝试解决这个问题，并认为我需要过滤或查找？但是，我已经经历了很多迭代，仍然无法确定它......

我要完成的工作：

从过滤项下拉列表中选择的选项
获取项目的值并显示 span.item-ii 与内部 html 匹配价值
获取从 lid- of span.item-ii 开始的类
显示具有相同类的 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();
                }
          });
        }
  });
}

【问题讨论】：

猜测这只是一个疏忽，但您的代码中有错字。在您的 HTML 标记中，您使用类“item-ii”，但在 javascript 中，您的目标是“itemii”...

标签： jquery jquery-selectors filter

【解决方案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();
 });

【讨论】：

您也可以将值设为 Feliformia-34，然后从中提取 34，但如果您不需要将值设为文本，则不要将其设为文本

【解决方案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>

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

【讨论】：