使用单选按钮过滤列表

时间:2014-11-14 20:02:02

标签: javascript jquery filter html-select

我目前正试图根据它们的厚度和#34; 3mm"和" 5mm"。

我想要在单击3mm的单选按钮时自动过滤类别为3mm的项目列表,并且相同的5mm。然后,如果你点击"没有偏好"我希望它根据厚度删除任何过滤器。

我现在已经搞乱了一段时间,试图拼凑代码,但无济于事,任何帮助都会非常感激!谢谢!

JSFiddle还:http://jsfiddle.net/gdkmrqnr/

HTML:

<div id="container">
  <div class="page">
    <div>
      <h1>piece-y search</h1>
    </div>

    <div id="main">


      <div class="c1">
        <h2>piece search</h2>
        <div id="piece-search">

            <ul class="sort-by">

            <li>
            <input class="search" placeholder="Search pieces" />
            </li>
            <li class="sort btn" data-sort="type">Sort by type</li>
            <li class="sort btn" data-sort="thickness">Sort by thickness</li>
            <li class="sort btn" data-sort="height">Sort by height</li>
            <li class="sort btn" data-sort="category">Sort by style</li>
          </ul>

          <ul class="filter">
             <li>
                <select name="material" id="filter-material">
                <option selected="selected" value="">Select a Material</option>
                <option value="plastic">Plastic</option>
                <option value="glass">Glass</option>
                </select>
            </li>
             <li>
           <input type="radio" name="thickness" value="none" checked>No Preference
           </li>
           <li>
           <input type="radio" name="thickness" value="3mm">3mm
           </li>
           <li>
           <input type="radio" name="thickness" value="5mm">5mm
           </li>
            <li class="btn" id="filter-none">Show all</li>
            <li class="btn" id="filter-scientific" value="category">Only show scientific glass</li>
            <li class="btn" id="filter-artsy" value="category">Only show artsy glass</li>
          </ul>

          <ul class="list">
            <li class="item">
                    <p class="sorting-info hide-this">
                    <p class="material">plastic</p>
                    <p class="type">pipe</p>
                    <p class="thickness">3mm</p>
                    <p class="height">15inch+</p>
                    <p class="category">artsy</p>
                     </p>
                </li>

                <li class="item">
                    <p class="sorting-info hide-this">
                    <p class="material">glass</p>
                    <p class="type">bowl</p>
                    <p class="thickness">3mm</p>
                    <p class="height">14inch-</p>
                    <p class="category">scientific</p>
                     </p>
                </li>
    </ul>
  </div>
</div>
</div>

</div> <!-- end of #container -->

JS

// radio button to select thickness
$("input[type='radio']").change(function () {
    var number = $("[name='thickness']:checked").val();
    var letter = $("[name='thickness']:checked").val();

    if (!thickness || !thickness) return;
    $("li").hide();
    $("li").filter(function (index) {
        return $(this).hasClass(thickness) && $(this).hasClass(letter);
    }).show();
});

2 个答案:

答案 0 :(得分:1)

您可以按thickness的文字过滤列表项:

$("input[type='radio']").change(function () {
    var number = $("[name='thickness']:checked").val();
    //var letter = $("[name='thickness']:checked").val();

    //if (!thickness || !thickness) return;
    var $items = $(".list .item");
    if (number === "none") {
        $items.show();
    } else {
        $items.hide();
        $items.filter(function (index) {
            return $(this).find('.thickness').text() === number;
        }).show();
    }
});

我尽量保留你的代码结构。查看您的code重构。

答案 1 :(得分:0)

好的,在查看了我的代码之后,我似乎已经用上面的html中介了这个选项:

有了这个,因为JS会在select上排序列表,它只是不会显示选中的框,如果有人知道如何修复它,我会很感激!

JS

// radio button to select thickness
$('#filter-3mm').click(function() {
  featureList.filter(function(item) {
    if (item.values().thickness == "3mm") {
      return true;
    } else {
      return false;
    }
  });
  return false;
});