下拉价格过滤器

Question

我使用 Jquery 创建了一个产品矩阵/选择器，它总体上运行良好，除了价格过滤器也可以工作，但与选择器有点分开。基本上，当从列表中选择一项功能时，它将显示产品，如果想要根据价格进行过滤，他们将从下拉列表中选择。问题是价格过滤器正在过滤，无论该产品是否具有该功能，价格过滤器只需要过滤功能选择器显示的产品。

我需要脚本中的帮助，以便价格过滤器仅过滤选择器显示的产品，而不显示其他产品的任何产品，如果选择了价格范围并且未显示该产品以返回类似“此根据所选的价格范围和功能，产品不可用"

HTML：

 <div id="pmcontainer">
  <p>Price Filter:
   <select name="pricefilter" class="pricefilter">
    <option value="0" selected>-- Filter by Price Range --</option>
    <option value="High">High End</option>
    <option value="Top">Top End</option>
    <option value="Mid">Mid Range</option>
    <option value="Low">Entry Level</option>
   </select>
  </p>
  <div id="application" class="selectors">
   <h4>Select by Application/Features</h4>
   <ul>
    <li>Outlets
     <ul>
      <li class="c2">2 Outlets</li>
      <li class="d145">7 Outlets</li>
      <li class="b8f b12r a12 ps10">8 Outlets</li>
     </ul> 
    </li>
    <li>Filtering 
     <ul>
      <li class="a12 ps10">Active</li>
      <li class="b8f b12r">Cascade</li>
      <li class="c2 d145">Passive</li>
      <li class="c2 d145 b8f b12r a12 ps10">Multi</li>
     </ul>
    </li>
   </ul>
  </div>
 </div>
 <div class="products">
     <h3>Products</h3>
  <ul>
   <li class="c2">Product C2</li>
   <li class="d145">Product D145</li>
   <li class="b8f">Product B8f</li>
   <li class="b12r">Product B12r</li>
   <li class="a12">Product A12</li>
   <li class="ps10">Product PS10</li>
  </ul>
 </div>

JQuery 脚本

 <script type="text/javascript" charset="utf-8">
     $(document).ready(function() { 
         //PRODUCT SELECTOR
      $('.products li').hide();
      $('#pmcontainer li ul li').click(function(e){
          e.preventDefault();
          $('.products li').hide();
           var classes = $(this).attr('class').split(' ');
         $.each(classes, function() {
              $('.products li.' + this).fadeIn("slow");
          });
          $('#pmcontainer li ul li').removeClass("current");
          $(this).addClass("current");
      });
      //PRICE FILTER
      $.pricemap = {
          '0' : $([]),
          'High' : $('.products .ps10'),
          'Top' : $('.products .a12'),
          'Mid' : $('.products .b8f, .products .b12r'),
          'Low' : $('.products .c2, .products .d145')
        };
        $('.pricefilter').change(function() {
          // hide all
          $.each($.pricemap, function() { this.hide(); });
          // show current
          $.pricemap[$(this).val()].show();
        });
     });
 </script>

希望这很清楚

Answer 1

我知道这是旧的，但我认为互联网上的另一个例子不会受到伤害。 我并不是说这是完美的解决方案，但它确实如海报所愿。

---

首先，在您的 HTML 中： <option value="0"已选中>-- Filter by Price Range --</option>

---

'selected' 应该是一个类：

<option value="0" class='selected'>-- Filter by Price Range --</option>

---

第二 - 我们将添加一个“p”标签（在您的产品 div 中，在您的 ul 结束标签之后）来保存您想要的警报。

<div class="products">
<h3>Products</h3>
    <ul>
       <li> ... </li>
    </ul>
<p id='alert' style='color:red'></p>
</div>

---

接下来，在您的 JQuery - JScript 中：

$(document).ready(function() {

可以替换为：

$(function() {

不过，这纯粹是语义上的，不是必需的。 接下来，在顶部添加一个名为 groups（或其他）的新变量来存储用户是否点击了任何选择器。

var group = "";     //blank if no group is selected yet

在那之后，我又添加了两个类（显示的和当前的）来帮助过滤过程。 current 被添加到当前选择器中分组的项目中，shown 被添加到 current 未被过滤掉的项目中。

---

替换：

$('#pmcontainer li ul li').click(function(e){
    e.preventDefault();
    $('.products li').hide();

与：

$('#pmcontainer li ul li').click(function(e){
    e.preventDefault();
    $('.products li').hide().removeClass("shown current");;

---

替换：

$('.products li.' + this).fadeIn("slow");

与：

$('.products li.' + this).fadeIn("slow");
$('.products li.' + this).addClass("shown current");

---

替换：

$(this).addClass("current");

与：

$(this).addClass("current");
group = $(this).text();

---

从以下位置删除“$”：

'High' : $('.products .ps10'),
'Top' : $('.products .a12'),
'Mid' : $('.products .b8f, .products .b12r'),
'Low' : $('.products .c2, .products .d145')

结果：

'High' : ('.products .ps10'),
'Top' : ('.products .a12'),
'Mid' : ('.products .b8f, .products .b12r'),
'Low' : ('.products .c2, .products .d145')

---

创建一个新函数：

function filterOut(selected) {
        $.each($.pricemap, function(i,v) {
                if( i !== selected )
                {
                    $(v).hide().removeClass('shown');
                }
        });
};

---

大修你的$('pricefilter').change 函数：

$('.pricefilter').change(function() { 如果（组===“”）{ filterOut($('select.pricefilter option:selected').val());

            $( $.pricemap[$(this).val()] ).show().addClass('shown');

        } else {

            // show current

            if( $( $.pricemap[$(this).val()] ).hasClass('current') ) {
                $( $.pricemap[$(this).val()] ).show().addClass('shown');
                $("p#alert").text("");
            } else if( $( $.pricemap[$(this).val()] ).hasClass('current') == false ) {
                $("p#alert").text("No price matches in this group");
            }
            // hide all
            filterOut( $('select.pricefilter option:selected').val() );
        }

---

你有一个功能过滤器供你选择。如果您不点击任何选择器，它甚至会仅通过您的价格过滤器选择来填充列表。