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

ここで達成したいのは、2つのフィルターリストのいずれかから任意の値を選択し、それに応じて結果を表示できるようにすることです。私が特に行き詰まっているのは、2つのフィルターリストのいずれかの「すべて」の値を選択した場合、「もう一方のリスト」のアクティブなフィルターを維持したまま、正しい結果を表示する方法がわからない部分です。考慮に入れます。

代わりに配列を見なければならないかもしれないと思いますが、その場合はどうすればいいのかわかりません。

正しい方向へのポインタは大歓迎です！

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 に答える