通过复选框过滤内容
我找不到如何使用jQuery过滤其拥有内容的div。 我的目标是：
我有前两步，但我坚持这一点。 请使用我的变量yy。
这里是html代码：
<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>
这是我的jQuery代码
$("#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();
});
CODEPEN
你的逻辑有点奇怪，使用一些更好的选择器，你可以做更多的事情。
工作示例：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);
});
});
首先，等待页面加载。 然后将所有图像收集到一个数组中。 然后，我可以遍历每个源数据并创建一个数组。 然后我将其刷新到过滤器列表的唯一值数组中。
注意此时，您可以将它们交换为航空公司名称与图像源值。
现在我们创建Filter列表。 我们知道有一个标签，一个复选框和一个计数。 我从数组中创建新的元素，然后根据需要添加它们。
对于复选框，我添加了绑定到每个元素的change事件函数。 它检查复选框的状态并隐藏/显示不是此选项的其他项目。
有点缺陷，如果你同时选中，它们全部隐藏。 为了解决这个问题，可以创建一个查找$("input[type='checkbox']").is(":checked")的函数并迭代这些值，使所有这些显示出来。
UPDATE
新的工作示例：https：//jsfiddle.net/Twisty/305ww469/3/
这样可以更好地处理所有选中或未选中的选项。
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);
});
});
尝试使用属性选择器：
checked.each(function () {
$(".airline-logo[src='" + $(this).val() + "']").closest('.ticket').show();
});
DEMO
链接地址: http://www.djcxy.com/p/96239.html