Filtering content by checkbox

I can't find how to filter divs on its owns content with jQuery. My goal is:

Get src value of image inside each divs with class .ticket

Create checkboxes with that values

If user checks chechkbox with value for example "img/delta.png" it should hide every divs with class .ticket except that contains image with same src.

Unchecking checkbox again show all .ticket divs again

I have first two step but I stuck on that. Please use my variable yy.

Here is 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 is my 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();

    });

CODEPEN

---

Your logic was a little weird and using some better selectors, you can do a 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 for the page to load. Then collect all the images into an array. I can then iterate each and make an array of the source data. I then flush it into an array of unique values for the filter list.

Note At this point, you could swap them to Airline Names versus the image source values.

Now we make the Filter list. We know there is a Label, a Checkbox, and a count. I make new elements from the array and then appends them as needed.

For the Checkbox, I add a change event function that is bound to each elements. It checks the status of of the checkbox and hides/show the other items that are not this option.

A bit of a bug, if you check both, they are all hidden. To fix this, can make a function that looks for $("input[type='checkbox']").is(":checked") and iterate over the values, making all those shown.

UPDATE

New Working Example: https://jsfiddle.net/Twisty/305ww469/3/

This handles all checked vs all 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);
  });
});

---

Try this using attribute selector:

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

DEMO

链接地址: http://www.djcxy.com/p/96240.html

上一篇: 闪烁对UILabel的影响

下一篇: 通过复选框过滤内容