选择时的 jQuery 过滤器

Question

我正在尝试创建一个 jQuery 过滤器来过滤一些 div。

HTML 过滤器是 选择一个选项后，会将 class="active"添加到该行(例如:)

<div class="panel style1 arrow-right">
    <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" href=
    "#board-type-filter">Board Type</a></h4>
    <div class="panel-collapse collapse" id="board-type-filter">
        <div class="panel-content">
            <ul class="check-square filters-option">
                <li data-board-id="board-all">
                    <a href="#">Toate<small class="total"></small></a>
                </li>
                <li data-board-id="RO">
                    <a href="#">Room Only<small class="total-ro"></small></a>
                </li>
                <li data-board-id="BB">
                    <a href="#">Bed and Breakfast<small class=
                    "total-bb"></small></a>
                </li>
                <li data-board-id="CB">
                    <a href="#">Continental Breakfast<small class=
                    "total-cb"></small></a>
                </li>
                <li data-board-id="HB">
                    <a href="#">Half Board<small class="total-hb"></small></a>
                </li>
                <li data-board-id="FB">
                    <a href="#">Full Board<small class="total-fb"></small></a>
                </li>
                <li data-board-id="AI">
                    <a href="#">All Inclusive<small class=
                    "total-ai"></small></a>
                </li>
                <li data-board-id="UI">
                    <a href="#">Ultra All İnclusive<small class=
                    "total-ui"></small></a>
                </li>
                <li data-board-id="SC">
                    <a href="#">Self Catering<small class=
                    "total-sc"></small></a>
                </li>
            </ul>
        </div>
    </div>
</div>

要过滤的HTML内容是:

<div data-board="Half Board">Half Board</div>
<div data-board="Full Board">Full Board</div>
<div data-board="All Inclusive">All Inclusive</div>
....

在此之前，我有一个带有复选框的过滤器，但它的样式不像上面那样。 旧的 jQuery 过滤器是:

var grabVal = "";
      $('input[type=checkbox]').click(function(e){
      $("input[type=checkbox]").each(function(){
      grabVal = $(this).val();
              if(!$(this).is(":checked")){
      $("div[data-board='"+grabVal+"']").hide();
              }else{
      $("div[data-board='"+grabVal+"']").show();
              }
          });

              if(!$("input[type=checkbox]").is(":checked")){
      $("div").show();   
          }

Witch 是点击操作的 scipt 还是具有数据 url 操作(页面加载并从 url 获取过滤器信息)的 scipt 更好？

任何建议将不胜感激。如果您需要更多信息，请告诉我。 也请原谅我的n00bie。 :)

Answer 1

如果我做对了，你必须在 <li>...</li> 之间创建一个连接您单击的元素以及连接到所选值的信息的容器(或多个容器)。

我假设了一个基于自定义类的解决方案。例如，

<li data-board-id="HB"> <a href="#">Half Board<small class="total-hb"></small></a>

点击它会显示以下容器的内容并隐藏其他容器的内容:

<div class="detail HB-detail">Details for Half Board</div>

逻辑处理如下:

$("#board-type-filter LI").on("click", function () {
    $(".detail").hide(500);
    $("." + $(this).attr("data-board-id") + "-detail").show(500)
});

此处为完整示例(经过编辑以支持 all 选项):http://jsfiddle.net/8vwbpLtv/3/