Question

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

使用类.ticket
创建包含该值的复选框
如果用户使用值检查chechkbox，例如“img / delta.png”，它应该隐藏每个具有类.ticket的div，除了包含具有相同src的图像。
取消选中复选框再次显示所有.ticket divs

我前两步但我坚持下去。请使用我的变量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

Answer 1

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

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

的 DEMO

Answer 2

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

工作示例：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);
  });
});

首先，等待页面加载。然后将所有图像收集到一个数组中。然后我可以迭代每个并创建一个源数据数组。然后，我将其刷新为筛选器列表的唯一值数组。

注意此时，您可以将它们更换为航空公司名称与图像来源值。

现在我们制作过滤器列表。我们知道有一个标签，一个复选框和一个计数。我从数组中创建新元素，然后根据需要附加它们。

对于Checkbox，我添加了一个绑定到每个元素的change事件函数。它会检查复选框的状态，并隐藏/显示不是此选项的其他项目。

一点点错误，如果你同时检查它们，它们都是隐藏的。要解决此问题，可以创建一个查找$("input[type='checkbox']").is(":checked")并迭代值的函数，使所有这些值都显示出来。

<强>更新

新工作示例：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);
  });
});

按复选框

2 个答案: