I'm trying to make a JavaScript filter that will sort movies, similar to the set up that you might see on amazon.com and so forth.
Using php/Laravel on the back end, I'm generating a series of div's that each contain a movie. When the user clicks a checkbox (for example, with a movie genre), all movies that are not of that selected genre will removed.
I'm using this as a project to teach myself laravel, jquery, and vue.js, but the front end JavaScript work has me stumped and I could really use some help. Thanks in advance.
Html/Php for checkboxes:
@foreach( $genres as $genre )
<label class="form-check">
<input class="form-check-input" id="genre" value="" type="checkbox" v-model="checked" @click="genreSearch()">
<span class="form-check-label"></span>
</label>
@endforeach
<span>You've Checked: @ </span>
Html/Php for Movies
@foreach ($movies as $movie)
<div class="card mb-2 " id="">
<div class="row no-gutters">
<div class="col-auto">
<a href="/movies/"><img src="" class="img-fluid" width="300px" height="100px" style="height: 400px;"></a>
</div>
<div class="col">
<div class="card-block px-2">
<h5 class="card-title mb-0"><strong></strong></h5>
@php $rating = $movie->rating->avg('rating'); @endphp
@foreach(range( 1,5 ) as $i )
<span class="fa-stack" style="width: 1em;">
<i class="far fa-star fa-stack-1x"></i>
@if( $rating > 0 )
@if( $rating > 0.5 )
<i class="fa fa-star starred fa-stack-1x"></i>
@else
<i class="fa fa-star-half fa-stack-1x"></i>
@endif
@endif
@php $rating--; @endphp
</span>
@endforeach
<h6 class="card-subtitle mt-2 mb-2 text-muted">By: </h6>
<h6 class="card-subtitle mb-2 text-muted">Released: </h6>
<p></p>
<div class="row ml-0">
<a href="/movies/" class="badge badge-primary pt-2 pb-2 px-3 mr-2">Details</a>
<a href="/movies//ratings" class="badge badge-primary pt-2 pb-2 px-1 mr-2">Ratings  
<span class="badge-light px-1"></span>
</a>
</div>
</div>
</div>
</div>
</div>
@endforeach
JavaScript:
<script>
var genreFilter = new Vue({
el: '#genres',
data: {
checked: []
},
methods: {
genreSearch: function () {
$( "#Fantasy" ).toggle(function() {
alert( "First handler for .toggle() called." );
}, function() {
alert( "Second Handler for toggle().called." );
});
}
}
});
</script>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire