用于过滤/显示两个单独类别类型的脚本

时间：2015-12-06 05:38:56

标签： javascript jquery

我无法让两个过滤器类别协同工作。所需的结果是，当选择下拉列表中的月份以及选中区域复选框时，仅显示div。

一个巨大的加号将是一个显示计数器，显示显示的div数与总div数。

这是我现在的代码。

        <select name="month-select" id="month-select">
        <option id="select">Select a Month</option>
        <option value="jan" id="jan" name="jan">January</option>
        <option value="feb" id="feb" name="feb">February</option>
        <option value="mar" id="mar" name="mar">March</option>
        <option value="apr" id="apr" name="apr">April</option>
        <option value="may" id="may" name="may">May</option>
        <option value="jun" id="jun" name="jun">June</option>
        <option value="jul" id="jul" name="jul">July</option>
        <option value="aug" id="aug" name="aug">August</option>
        <option value="sep" id="sep" name="sep">September</option>
        <option value="oct" id="oct" name="oct">October</option>
        <option value="nov" id="nov" name="nov">November</option>
        <option value="dec" id="dec" name="dec">December</option>
    </select> 
    <input type="checkbox" value="red" id="red" onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">red</label>

    <input type="checkbox" value="green" id="green" onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">green</label>

    <input type="checkbox" value="blue" id="blue"onclick="Color.filterByColor(this);" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">blue</label>

    <input type="checkbox" value="selectall" id="selectall"onclick="Color.filterByColorSelectAll();" checked="checked" class="checkbox checkboxColor"><label for="ck-loc-us">select all colors</label>
    <div id="fulllist">
    <div class="rResult red jan mar apr may">
        <h3>Spring and January</h3>
                <ul>
                  <li>Stuff</li>
                  <li>Stuff</li>
                  <li>Stuff</li>
                </ul>
            <a href="#">CTA</a>
    </div>
    <div class="rResult blue apr may dec">
        <h3>April May December</h3>
                <ul>
                  <li>Stuff</li>
                  <li>Stuff</li>
                  <li>Stuff</li>
                </ul>
            <a href="#">CTA</a>
    </div>

    <div class="rResult green jul">
        <h3>July Only</h3>
                <ul>
                  <li>Stuff</li>
                  <li>Stuff</li>
                  <li>Stuff</li>
                </ul>
            <a href="#">CTA</a>
    </div>
<div id="filtersContainerUpdatingMessage">
    <p>Updating...</p>
</div>

<div class="divsShowing">
    Showing
        <span class="textForALL">ALL ( </span>
        <span class="divsShowing"> </span> of <span class="divsTotal"> </span>
        <span class="textForALL">) </span>
    Divs
</div>

<div class="divsShowingAreZero">
    <p>Please select a color and/or different month.</p>
</div>
    </div>
     <script>
        $('#month-select').change(function(){
            $('.rResult').each(function(){
                if ($(this).hasClass($('#month-select').val())) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        });
    </script>

1 个答案:

答案 0 :(得分：0)

尝试以下方法。这是处理过滤器的统一方式。

请注意以下几点。

  • 除了selectall
    • 之外，还添加了一个新的复选框类
  • 所有更改功能都将调用相同的常用功能，selectall将选中并取消选中颜色复选框，然后调用常用功能。

＆＃13;
＆＃13; 
$('#month-select').change(function() {
  window.filter();
});
window.Color = {
  filterByColor: function() {
    window.filter();
  },
  filterByColorSelectAll: function() {
    if ($("#selectall").is(":checked"))
      $(".checkColor").prop("checked", "checked");
    else
      $(".checkColor").removeProp("checked");
    window.filter();
  },
}
window.filter = function() {
  var month = $('#month-select').val();
  if (month == null || month == "")
    $('.rResult').show(); //show all
  else {
    $('.rResult').hide(); // hide all 
    $('.rResult.' + month).show(); //filter by month
  }
  var strColorFilter = [];
  var checkedItems = $(".checkColor:not(:checked)").map(function(i, o) {
    return "." + o.id;
  }).get();
  //filter by color
  if (checkedItems.length == 0) return;
  strColorFilter.push(".rResult:visible"); //take on visible after month filter
  strColorFilter.push(checkedItems);
  $(strColorFilter.join("")).hide();
}
＆＃13; 
.rResult {}
＆＃13; 
<select name="month-select" id="month-select">
  <option value="" id="select">Select a Month</option>
  <option value="jan" id="jan" name="jan">January</option>
  <option value="feb" id="feb" name="feb">February</option>
  <option value="mar" id="mar" name="mar">March</option>
  <option value="apr" id="apr" name="apr">April</option>
  <option value="may" id="may" name="may">May</option>
  <option value="jun" id="jun" name="jun">June</option>
  <option value="jul" id="jul" name="jul">July</option>
  <option value="aug" id="aug" name="aug">August</option>
  <option value="sep" id="sep" name="sep">September</option>
  <option value="oct" id="oct" name="oct">October</option>
  <option value="nov" id="nov" name="nov">November</option>
  <option value="dec" id="dec" name="dec">December</option>
</select>
<input type="checkbox" value="red" id="red" onclick="Color.filterByColor(this);" checked="checked" class="checkColor checkbox checkboxColor">
<label for="ck-loc-us">red</label>

<input type="checkbox" value="green" id="green" onclick="Color.filterByColor(this);" checked="checked" class="checkColor checkbox checkboxColor">
<label for="ck-loc-us">green</label>

<input type="checkbox" value="blue" id="blue" onclick="Color.filterByColor(this);" checked="checked" class="checkColor checkbox checkboxColor">
<label for="ck-loc-us">blue</label>

<input type="checkbox" value="selectall" id="selectall" onclick="Color.filterByColorSelectAll();" checked="checked" class="checkbox checkboxColor">
<label for="ck-loc-us">select all colors</label>
<div id="fulllist">
  <div class="rResult red jan mar apr may">
    <h3>Spring and January</h3>
    <ul>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
    </ul>
    <a href="#">CTA</a>
  </div>
  <div class="rResult blue apr may dec">
    <h3>April May December</h3>
    <ul>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
    </ul>
    <a href="#">CTA</a>
  </div>

  <div class="rResult green jul">
    <h3>July Only</h3>
    <ul>
      <li>Stuff</li>
      <li>Stuff</li>
      <li>Stuff</li>
    </ul>
    <a href="#">CTA</a>
  </div>
  <div id="filtersContainerUpdatingMessage">
    <p>Updating...</p>
  </div>

  <div class="divsShowing">
    Showing
    <span class="textForALL">ALL ( </span>
    <span class="divsShowing"> </span> of <span class="divsTotal"> </span>
    <span class="textForALL">) </span> Divs
  </div>

  <div class="divsShowingAreZero">
    <p>Please select a color and/or different month.</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

演示：http://jsfiddle.net/kishoresahas/2kGzZ/165

相关问题
最新问题