Please see this JSFiddle: http://ift.tt/1YfrnXk
I am trying to create some script that will only display the first h2 tag in each div with the class "resultHolder" even after each time a user applies a different filter. For example, select March and only the color Red. Instead of "RED" showing up twice in the results, the script will only allow it to display the first time.
<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">
<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>
<div class="resultHolder">
<div class="rResult green jan feb mar">
<h2>GREEN</h2>
<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">
<h2>GREEN</h2>
<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">
<h2>GREEN</h2>
<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">
<h3>GREEN</h3>
<ul>
<li>March</li>
<li>April</li>
<li>May</li>
</ul>
<a href="#">CTA</a>
</div>
</div>
</div>
<script>
$('#month-select').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();
//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);
}
Aucun commentaire:
Enregistrer un commentaire