i can't find how filter divs on owns content jquery. goal is:
- get src value of image inside each divs class .ticket
- create checkboxes values
- if user checks chechkbox value example "img/delta.png" should hide every divs class .ticket except contains image same src.
- unchecking checkbox again show .ticket divs again
i have first 2 step stuck on that. please use variable yy.
here html code:
<div class="filter"> <h2>filtering:</h2> </div> <div id="ticketsx" class="active"> <div class="ticket wifi"> <h2>delta</h2> <img class="airline-logo" src="img/delta.png" /> </div> <div class="ticket wifi"> <h2>american airlines</h2> <img class="airline-logo" src="img/american-airlines.png" /> </div> <div class="ticket wifi"> <h2>american airlines</h2> <img class="airline-logo" src="img/american-airlines.png" /> </div> </div> here jquery code
$("#ticketsx").find(".ticket img").each(function () { var yy = ($(this).attr('src')), sections = $('.ticket'); if (!$('input[value="' + yy + '"]').length) { $(".filter").append('<label><input type="checkbox" value="' + yy + '">' + yy + ' (<span>1</span>) </ label>'); } else { var currentcount = $('input[value="' + yy + '"]').next('span'); var newcount = parseint(currentcount.text()) + 1; currentcount.text(newcount); } function updatecontentvisibility() { var checked = $(".filter :checkbox:checked"); if (checked.length) { sections.hide(); checked.each(function () { $("." + $(this).val()); }); } else { sections.show(); } } $(".filter :checkbox").click(updatecontentvisibility); updatecontentvisibility(); });
your logic little weird , using better selectors, can few more things.
working example: https://jsfiddle.net/twisty/305ww469/
jquery
$(function() { var images = $("#ticketsx .airline-logo"); var airlines = images.map(function() { return $(this).attr("src"); }); var unique = []; $.each(airlines, function(k, v) { if ($.inarray(v, unique) === -1) unique.push(v); }); airlines = unique; $.each(airlines, function(k, v) { var filtlabel = $("<label>"); var filtinput = $("<input>", { type: "checkbox", value: v }).change(function() { var self = $(this); if (self.is(":checked")) { console.log("info: " + self.val() + " checked. hiding others."); $("img.airline-logo[src!='" + self.val() + "']").closest(".ticket").hide(); } else { console.log("info: " + self.val() + " unchecked. showing others."); $("img.airline-logo[src!='" + self.val() + "']").closest(".ticket").show(); } }); var filtlength = $("#ticketsx .ticket img[src='" + v + "']").length; var filtspan = $("<span>"); filtspan.html("(" + filtlength + ")"); filtlabel.append(filtinput).append(v + " ").append(filtspan); $(".filter").append(filtlabel); }); }); first, wait page load. collect images array. can iterate each , make array of source data. flush array of unique values filter list.
note @ point, swap them airline names versus image source values.
now make filter list. know there label, checkbox, , count. make new elements array , appends them needed.
for checkbox, add change event function bound each elements. checks status of of checkbox , hides/show other items not option.
a bit of bug, if check both, hidden. fix this, can make function looks $("input[type='checkbox']").is(":checked") , iterate on values, making shown.
update
new working example: https://jsfiddle.net/twisty/305ww469/3/
this handles checked vs unchecked better.
jquery
$(function() { var images = $("#ticketsx .airline-logo"); var airlines = images.map(function() { return $(this).attr("src"); }); var unique = []; $.each(airlines, function(k, v) { if ($.inarray(v, unique) === -1) unique.push(v); }); airlines = unique; function showchecked() { $(".filter input[type='checkbox']").each(function(k, v) { if ($(v).is(":checked")) { $("#ticketsx .airline-logo[src='" + $(v).val() + "']").closest(".ticket").show(); } else { $("#ticketsx .airline-logo[src='" + $(v).val() + "']").closest(".ticket").hide(); } }); if ($(".filter input[type='checkbox']:checked").length === 0) { $("#ticketsx .ticket").show(); } } $.each(airlines, function(k, v) { var filtlabel = $("<label>"); var filtinput = $("<input>", { type: "checkbox", value: v }).change(showchecked); var filtlength = $("#ticketsx .ticket img[src='" + v + "']").length; var filtspan = $("<span>"); filtspan.html("(" + filtlength + ")"); filtlabel.append(filtinput).append(v + " ").append(filtspan); $(".filter").append(filtlabel); }); }); 