Question

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

我想要完成的任务：

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

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>

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

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

2 个答案:

HTML：

JQuery的：

CSS：