1

我正在尝试在列表中组合一个过滤器（从数据库生成），但我感觉我正在走一条复杂的道路。或者更确切地说，我被困住了，不知道如何从这里出发。到目前为止我所拥有的如下所示。

过滤器部分：

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

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

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

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

4

1 回答 1

0 
$('.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');
});
于 2013-03-21T12:48:27.283 回答