每次应用过滤器后仅在 div 中显示第一个 h2 标记的脚本答案

【问题标题】：Script to display only first h2 tag in a div after filters are applied each time每次应用过滤器后仅在 div 中显示第一个 h2 标记的脚本
【发布时间】：2015-12-16 14:56:23
【问题描述】：

请看这个 JSFiddle：http://jsfiddle.net/as0tpwmt/

我正在尝试创建一些脚本，即使在每次用户应用不同的应用后，它也只会在每个带有“resultHolder”类的 div 中显示第一个 h2筛选。例如，选择三月并且只选择红色。 “RED”不会在结果中出现两次，而脚本只允许第一次显示。

<div class="resultHolder">
  <div class="rResult red jan feb mar ">
    <h2>RED</h2>
    <h3>SUPER RED</h3>
    <ul>
      <li>January</li>
      <li>February</li>
      <li>March</li>
    </ul>
    <a href="#">CTA</a>
  </div>
  <div class="rResult red mar apr may">
    <h2>RED</h2>
    <h3>DARK RED</h3>
    <ul>
      <li>March</li>
      <li>April</li>
      <li>May</li>
    </ul>
    <a href="#">CTA</a>
  </div>


  <div class="rResult red may jun jul">
    <h2>RED</h2>
    <h3>LIGHT RED</h3>
    <ul>
       <li>May</li>
      <li>June</li>
      <li>July</li>
    </ul>
    <a href="#">CTA</a>
  </div>
</div>

【问题讨论】：

你能否澄清一下你想从你的代码中实现什么，或者点击任何特定颜色比如红色、绿色或等等时应该发生什么特定的事情？请再澄清一点！
与其粘贴一大块 html，不如使用更易于管理的代码量更容易回答。看起来这里有很多内容可以删减，以便更容易理解您的问题。
例如，如果您要从下拉列表中选择“三月”，然后只选择红色。我希望 RED 只显示第一次，而不是在结果中显示两次 SUPER RED 和 DARK RED。

标签： javascript jquery html checkbox

【解决方案1】：

在您的window.filter() function 中进行以下更改：

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 redCount = 0;
   var greenCount = 0;
   $('.' + month).find('h2').each(function(){ 
    if($(this).html().toLowerCase() == "red") { 
        redCount++;
      }
     if($(this).html().toLowerCase() == "green") { 
        greenCount++;
      }
   });

   if(redCount > 1)
   {
        $('.resultHolder').find('.red.' + month + ':not(:first) h2').hide();
        $('.resultHolder').find('.red.' + month + ':first').find('h2').show();
   }
   if(greenCount > 1)
   {
        $('.resultHolder').find('.green.' + month + ':not(:first) h2').hide();
        $('.resultHolder').find('.green.' + month + ':first').find('h2').show();
   }
  }

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

}

这将为您提供所需的结果。选择“红色”时，包含“红色”的h2 将只显示一次。 'green' 也是如此。

这是相同的Updated Fiddle。希望这会有所帮助。

【讨论】：

感谢 Alorika 的帮助，但这不是预期的结果。我试图让脚本只显示红色的两个版本，但只显示红色 h2 标签一次。所需的结果将是 RED: SUPER RED: list, DARK RED:list。如果选择 March 和 Red 作为过滤器。
这里的目标是只显示主要类别颜色一次，但仍会在其下方显示该颜色的变化 - 如果应用了过滤器。
更新了代码。请检查它是否符合您的要求并告诉我。

【解决方案2】：

我得到了您想要的输出，按照以下方式对 HTML 和 Javascript 进行一些更改，它的工作原理：

HTML：

<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="Color">red</label>

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

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

<input type="checkbox" value="selectall" id="selectall" onclick="Color.filterByColorSelectAll();" checked="checked" class="checkbox checkboxColor">
<label for="Color">select all colors</label>

<div class="resultsNumberShowing">
    <b>Showing
    <span class="textForALL">ALL ( </span><span id="activeresults" class="NumberShowing"></span> of <span id="totalresults" class="NumberTotal"></span><span class="textForALL">) </span></b> Results
</div>

<div id="fulllist">
    <div class="resultHolder">
        <h2>RED</h2>
        <div class="rResult red jan feb mar ">
            <h3>SUPER RED</h3>
            <ul>
                <li>January</li>
                <li>February</li>
                <li>March</li>
            </ul>
            <a href="#">CTA</a>
        </div>
        <div class="rResult red mar apr may">
            <h3>DARK RED</h3>
            <ul>
                <li>March</li>
                <li>April</li>
                <li>May</li>
            </ul>
            <a href="#">CTA</a>
        </div>
        <div class="rResult red may jun jul">
            <h3>LIGHT RED</h3>
            <ul>
                <li>May</li>
                <li>June</li>
                <li>July</li>
            </ul>
            <a href="#">CTA</a>
        </div>
    </div> 
    <div class="resultHolder">
        <div class="rResult green jan feb mar">
            <h3>SUPER GREEN</h3>
            <ul>
                <li>January</li>
                <li>February</li>
                <li>March</li>
            </ul>
            <a href="#">CTA</a>
        </div>
        <div class="rResult green mar apr may">
            <h3>Light GREEN</h3>
            <ul>
                <li>March</li>
                <li>April</li>
                <li>May</li>
            </ul>
            <a href="#">CTA</a>
        </div>
        <div class="rResult green may jun jul">
            <h3>DARK GREEN</h3>
            <ul>
                <li>February</li>
                <li>March</li>
                <li>April</li>
            </ul>
        <a href="#">CTA</a>
        </div>
        <div class="rResult green mar apr may">
            <ul>
                <li>March</li>
                <li>April</li>
                <li>May</li>
            </ul>
            <a href="#">CTA</a>
        </div>
    </div>
</div>

Javascript：

$('#month-select').on('change', function() {
    window.filter();
    updateCounter();
});
window.Color = {
    filterByColor: function() {
        window.filter();
        updateCounter();
    },
    filterByColorSelectAll: function() {
        if ($("#selectall").is(":checked")){
            $(".checkColor").prop("checked", "checked");
        } else {
            $(".checkColor").removeProp("checked");
            window.filter();
            updateCounter();
        }
    }
}
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();
    var tempItems = $(".checkColor:checked").map(function(i, o) {
        var newTemp = o.id;
        newTemp = newTemp.toUpperCase();
        return newTemp;
    }).get();
    $("#fulllist .resultHolder h2").text(tempItems);

    //filter by color
    if (checkedItems.length == 0) {
         return;
    }
    strColorFilter.push(".rResult:visible"); //take on visible after month filter
    strColorFilter.push(checkedItems);
    $(strColorFilter.join("")).hide();
}

$(document.body).append($("<div>"));
var n = $(".rResult").length;
$( "#totalresults" ).text( n);

$(document.body).append($("<div>"));
var x = $(".rResult").filter(":visible").length;
$("#activeresults").text(x);

function updateCounter(){
    var totalColors = 0;
    totalColors = $(".rResult:visible").length;
    if(totalColors == -1){
        totalColors = 0;
    }
    $("#activeresults").html(totalColors);
}

【讨论】：