I have been working on creating a page that allows movies to be called up by genre (see code below). At the moment, I have a code that works almost exactly how it should: when I check the box for "Comedy," it successfully returns all movies that have "Comedy" as one of their genres, when I check the box for "Animation," it successfully returns all movies that have "Animation" as one of their genres, etc. What I would like to change is this: at the moment, if I check both the "Comedy" and the "Animation" boxes, my code returns all movies that have "Comedy" as a genre and all movies that have "Animation" as a genre. I would like for it to only return movies that have both "Comedy" and "Animation" among their genres. I'm hoping this is a simple adjustment within my already-existing code, but I cannot find a resource that successfully models the effect I want (the closest I've found are examples of codes that filter based on multiple criteria that must be of different types [i.e. one genre, one rating, and one runtime]), and my attempts at hybridizing different codes have not been successful. Thank you in advance for any help you can offer! It's much appreciated!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sarah's Movie TYGERRSSSS - Search by Genre</title>
<link rel="stylesheet" href="Stylesheets/NewThing.css">
<script src="http://ift.tt/1pD5F0p"></script>
</head>
<body>
<a href="TYGERRSSSS_Search.html"><img id="arrow" src="Images/ArrowOrange.PNG" /></a>
<h1>Search by Genre</h1>
<h2>Genres:</h2><span></span><div id="filters">
<label class="labels" for="Adventure">Adventure</label><input id="Adventure" type="checkbox" value="Adventure" />
<label class="labels" for="Animation">Animation</label><input id="Animation" type="checkbox" value="Animation" />
<label class="labels" for="Comedy">Comedy</label><input id="Comedy" type="checkbox" value="Comedy" />
<label class="labels" for="Family">Family</label><input id="Family" type="checkbox" value="Family" />
</div>
<hr/>
<div class="products">
<div data-group=" Adventure Animation Comedy" class="product"><p><a href="Movie_101 Dalmatians.html">101 Dalmatians</a> - Animation/Adventure/Comedy</div>
<div data-group=" Animation Family" class="product"><p><a href="Movie_101 Dalmatians II- Patch's London Adventure.html">101 Dalmatians II: Patch's London Adventure</a> - Animation/Family</div>
<div data-group=" Advertisement History" class="product"><a href="Movie_1001 Classic Commercials.html">1001 Classic Commercials</a> - Advertisement/History</div>
</div>
<script type="text/javascript">
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.product').hide();
$('input[type="checkbox"]:checked').each(function() {
$('div[data-group*=' + this.value + ']').fadeIn();
});
} else {
$('.products > div').fadeIn();
}
});
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire