Jquery 按复选框筛选内容

我找不到如何使用jQuery过滤其内容上的div。我的目标是：

• 使用class.ticket获取每个div内图像的src值
• 使用该值创建复选框
• 如果用户使用值（例如“img/delta.png”）检查chechkbox，它应该隐藏class.ticket中的每个div，但包含具有相同src的图像的div除外
• 再次取消选中复选框再次显示全部。票证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();

    });

$（“#ticketsX”）.find（“.ticket img”）.each（函数（）{
var yy=（$（this.attr（'src'）），
部分=$（“.ticket”）；
如果（！$（'input[value=“”+yy+“]'）。长度）{
$（“.filter”）.append（“+yy+”（1）”；
}否则{
var currentCount=$（'input[value=“”+yy+'“]'）。下一步（'span'）；
var newCount=parseInt（currentCount.text（））+1；
currentCount.text（newCount）；
}
函数updateContentVisibility（）{
var checked=$（“.filter:checkbox:checked”）；
如果（选中。长度）{
节。隐藏（）；
选中。每个（函数（）{
$（“+$（this.val（））；
});
}否则{
sections.show（）；
}
}
$（“.filter:复选框”）。单击（updateContentVisibility）；
updateContentVisibility（）；
});

---

使用属性选择器尝试此操作：

checked.each(function () {              
    $(".airline-logo[src='" + $(this).val()  + "']").closest('.ticket').show();
});

---

尝试使用属性选择器：

checked.each(function () {              
    $(".airline-logo[src='" + $(this).val()  + "']").closest('.ticket').show();
});

---

您的逻辑有点奇怪，使用一些更好的选择器，您可以做更多的事情

工作示例：

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

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

---

你的逻辑有点奇怪，使用一些更好的选择器，你可以做更多的事情

工作示例：

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

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

---

哇，非常感谢。你的帖子给了我很多。告诉我函数（k，v）中的（k，v）是什么？我们的功能是什么？@zcelanamonnyí请回顾：当你看到

$。每个（航空公司，功能（k，v）{}）我正在使用一个未命名的函数，输入键为
k
，输入值为
v
。在本例中，
k
将是每个数组索引
0,1，…n
v
将是数组中的元素：
'img/american airlines.png'，'img/american airlines.png'，…
类似于
$（“#ticketsX”）.find（.ticket img”）.each（函数（）{}）你用过的。哇，非常感谢。你的帖子给了我很多。告诉我函数（k，v）中的（k，v）是什么？我们的功能是什么？@zcelanamonnyí请回顾：当你看到
$。每个（航空公司，功能（k，v）{}）我正在使用一个未命名的函数，输入键为
k
，输入值为
v
。在本例中，
k
将是每个数组索引
0,1，…n
v
将是数组中的元素：
'img/american airlines.png'，'img/american airlines.png'，…
类似于
$（“#ticketsX”）.find（.ticket img”）.each（函数（）{}）您使用过的。