Question

我正在尝试在列表中放置一个过滤器（从数据库生成），但我感觉我正走在一条复杂的道路上。或者说，我被困住了，不知道怎么离开这里。到目前为止我所拥有的内容如下所示。

过滤器部分：

<div id="searchfilter">
  <form id="filterform" name="form1" method="post" action="">
    <p>Search Filters</p>
    <p>By Area of Expertise</p>
      <ul id="funtion">
        <li>
          <label>
            <span>All areas of expertise</span>
            <input class="resetfilter" type="checkbox" name="cbxFunction" id="cbxFunction_0" value="all" checked="checked" disabled="disabled" />
          </label>
        </li>
        <li>
          <label>
            <span>Administration</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_1" value="administration" />
          </label>
        </li>
        <li>
          <label>
            <span>Animal Health</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_2" value="animal-health" />
          </label>
        </li>
        <li>
          <label>
            <span>Creative</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="creative" />
          </label>
        </li>
        <li>
          <label>
            <span>Marketing</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="marketing" />
          </label>
        </li>
        <li>
          <label>
            <span>Information Technology</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="information-technology" />
          </label>
        </li>
        <li>
          <label>
            <span>Research &amp; Development</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="research-and-development" />
          </label>
        </li>
      </ul>

      <p>By Location</p>

      <ul id="country">
        <li>
          <label>
            <span>All countries</span>
            <input class="resetfilter" type="checkbox" name="cbxLocation" id="cbxLocation_0" value="all" checked="checked" disabled="disabled" />
          </label>
        </li>
        <li>
          <label>
            <span>Malaysia</span>
            <input class="filter" type="checkbox" name="cbxLocation" id="cbxLocation_1" value="malaysia" />
          </label>
        </li>
        <li>
          <label>
            <span>The Netherlands</span>
            <input class="filter" type="checkbox" name="cbxLocation" id="cbxLocation_1" value="the-netherlands" />
          </label>
        </li>
        <li>
          <label>
            <span>United Kingdom</span>
            <input class="filter" type="checkbox" name="cbxLocation" id="cbxLocation_2" value="united-kingdom" />
          </label>
        </li>
      </ul>
    </form>
  </div>

结果部分：

  <div>
    <h3>Current Vacancies</h3>
    <ul class="pagelink">
      <li class="job-listing function country administration the-netherlands">
        Assistant Regulatory Affairs Manager<br />
        Administration, The Netherlands
      </li>
      <li class="job-listing function country animal-health united-kingdom">
        Clinical Research Associate<br />
        Animal Health, United Kingdom
      </li>
      <li class="job-listing function country creative malaysia">
        Copywriter<br />
        Creative, Malaysia
      </li>
      <li class="job-listing function country administration malaysia">
        Corporate Communications Manager<br />
        Administration, Malaysia
      </li>
      <li class="job-listing function country marketing the-netherlands">
        Customer Service Associate<br />
        Marketing, The Netherlands
      </li>
      <li class="job-listing function country research-and-development the-netherlands">
        Emerging Technology Specialist<br />
        Research &amp; Development, The Netherlands
      </li>
      <li class="job-listing function country information-technology united-kingdom">
        Legal Counsel - Intellectual Property (IP)<br />
        Information Technology, United Kingdom
      </li>
      <li class="job-listing function country information-technology the-netherlands">
        Legal Counsel – Drafting Intelectual Property (IP) Related Agreements<br />
        Information Technology, The Netherlands
      </li>
    </ul>
  </div>

使用Javascript：

$('.filter').change(function() {
    $filter = $(this).val();
    $filtertype = $(this).parents('ul').attr('id');
    $(this).parents('ul').find('input.resetfilter:checkbox').attr('checked', false);
    $(this).parents('ul').find('input.resetfilter:checkbox').removeAttr("disabled");

    if ($(this).is(':checked')) {
            $('.pagelink').find('li.'+$filter).show();
    }
    else
    {
            $('.pagelink').find('li.'+$filter).hide();
    }
});

$('.resetfilter').change(function() {
    $filtertype = $(this).parents('ul').attr('id');
    if ($(this).is(':checked')) {
            $('.pagelink').find('li.'+$filtertype).show();
            $(this).parents('ul').find('input.filter:checkbox').attr('checked', false);
            $(this).parents('ul').find('input.resetfilter:checkbox').attr('disabled', true);
    }
});

我想在这里完成的是能够从两个过滤器列表中的任何一个中选择任何值并相应地显示结果。如果我选择两个过滤器列表中的一个的“全部”值，那么我特别卡住的部分，我不知道如何在保持“其他列表”的活动过滤器的同时显示正确的结果考虑到。

我猜我可能不得不查看数组，但在这种情况下我不知道如何去处理它。

非常感谢任何正确方向的指针！

Answer 1

$('.filter').change(function() {

  // Get all checked filters...
  var $allCheckedFilters = $('input.filter:checked');
  var checkedValues = [];

  // Iterate and build array containing all checked values...
  $allCheckedFilters.each(function(index, element){
    checkedValues.push($(this).val());
  })

  // Build string to use as selector...
  var classNameStr = checkedValues.join('.');    

  // Hide all listings...
  $('.job-listing').hide();

  // Get items with all classnames and show them...
  $('li.' + classNameStr).show();

});

$('.resetfilter').change(function() {
    // Get the parent UL...
    var $parentUl = $(this).parents('ul');

    // Get the checkboxes from the section the checkbox we just checked was in...
    var $thisSectionCheckboxes = $parentUl.find('input.filter');
    if($(this).is(':checked')) {
      // Check all checkboxes in the current section...
      $thisSectionCheckboxes.attr('checked', 'checked');
    }else{
      // User unchecked the All checkbox. So uncheck all checkboxes in this section
      $thisSectionCheckboxes.removeAttr('checked');
    }

    // Let the change handler we added above handle the show and hide of the relevant sections...
    $thisSectionCheckboxes.first().trigger('change');
});

带有多个过滤器的jQuery结果列表

1 个答案: