asked on

Change javascript filter code from OR logic to AND

I have this code:

  <div class="col-6 col-md-3 checkbox-rounds" id="filter-checks">
  <p class="orange OldStandard"> Menu Filters</p>
  <a type="button" class="check orange pointer OldStandard">Select All </a>
  <br>
  <a type="button" class="uncheck orange pointer OldStandard"> Unselect All</a>
  <br>
        <input type="checkbox" class="checkbox-round" value="vegan" id="vegan" checked/><label for="vegan" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Vegan</label>
        <br/>
        <input type="checkbox" class="checkbox-round" value="vegetarian" id="vegetarian" checked/> <label for="vegetarian" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Vegetarian</label>
        <br/>
        <input type="checkbox" class="checkbox-round" value="pescetarian" id="pescetarian" checked/> <label for="pescetarian" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Pescetarian</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="dairy-free" id="dairy-free" checked/> <label for="dairy-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Dairy-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="egg-free" id="egg-free" checked/> <label for="egg-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Egg-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="fish-free" id="fish-free" checked/> <label for="fish-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Fish-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="shellfish" id="shellfish" checked/> <label for="shellfish" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Shellfish-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="tree" id="tree" checked/> <label for="tree" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Tree nut-free</label>
  </div>

Open in new window

(check boxes)

<span class="deliveryItem pointer vertical-top textCenter
				<?php if($filter[0] == 'Y'){echo "vegan ";}
				if($filter[1] == 'Y'){echo "vegetarian ";}
				if($filter[2] == 'Y'){echo "pescetarian ";}
				if($filter[3] == 'Y'){echo "dairy-free ";}
				if($filter[4] == 'Y'){echo "egg-free ";}
				if($filter[5] == 'Y'){echo "fish-free ";}
				if($filter[6] == 'Y'){echo "shellfish ";}
				if($filter[7] == 'Y'){echo "tree ";}
				if($filter[8] == 'Y'){echo "peanut ";}
				if($filter[9] == 'Y'){echo "soy ";}
				if($filter[10] == 'Y'){echo "total-fat ";}
				if($filter[11] == 'Y'){echo "saturated-fat ";}
				if($filter[12] == 'Y'){echo "cholesterol ";}
				if($filter[13] == 'Y'){echo "sodium ";}
				if($filter[14] == 'Y'){echo "protein ";}
				if($filter[15] == 'Y'){echo "calories ";}
				?>">
				<?php echo '<input type="hidden" name="meal_id" value="'.$meal_id1.'">';?>
				 <img src="<?php echo $image1; ?>" width="280px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name1;?> </h3>
				<p class= "OldStandardItalic text-black font2 vertical1"> <?php echo $subtitle1;?> </p>
				<hr>
				<span class="open_sanssemibold text-black">
				<?php	if(count($prices1) > 1){print_r($firstEle ." - ". $lastEle);}
				else{ print_r($price1);}
				?>
				<br>
				</span>

Open in new window

Inside the span is the meal and the logic for the filtering,
Here is my javascript code that allows the filtering:

$("#filter-checks :checkbox").click(function() {
	$(".deliveryItem").hide();
		 $("#filter-checks :checkbox:checked").each(function() {
		      $("." + $(this).val()).show();
		  });
});

Open in new window

I noticed that the logic in my filtering is using tree oil or vegan. How can I make it tree oil AND vegan? So that if a meal doesn't contain one, of the selection, it doesn't show.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jazzy 1012

ASKER

This worked perfectly! Thank you so much!

Julian Hansen

You are welcome.

Michel Plungjan

Have a look at this https://jsfiddle.net/mplungjan/yp0q6wyj/ - If Julian's version worked perfectly, I think I misunderstood something?

$(function() {
  $("#filter-checks :checkbox").click(function() {
    $(".deliveryItem").hide();
    var vegTree = [];
    $("#filter-checks :checkbox:checked").each(function() {
      $("." + $(this).val()).show();
      vegTree.push(this.value);
    });
    if (vegTree.indexOf('tree') ==-1 || vegTree.indexOf('vegan')==-1) {
      $(".vegan, .tree").hide();
    }
  });
});

Open in new window

Julian Hansen

It is a simple solution - we build up a class string that acts as a selector - only elements that match that selector will be shown. Your solution only deals with tree and vegan I read the requirement to be any combination of the food types.