I have some problems with the if condition, I have checkbox filters, if I checked "Type" it displays the result but when I clicked "Type" and "Duration" it's not displaying anything.
I want if I click one category or more, it should display data according to the checkbox that was checked checked.
Code:
$('.checkbox input').change(function() {
var selectedFilters = [];
$.each($(".checkbox input:checked"), function() {
selectedFilters.push($(this).val());
});
console.log(selectedFilters);
$('#video-result').html("");
$.getJSON(root + "/assets/js/data-video.json", function(data) {
$.each(data, function(key, value) {
var grid = "";
if (value.type.search(selectedFilters) != -1 && value.duration.search(selectedFilters) != -1 && value.difficulty.search(selectedFilters) != -1 && value.subtitle.search(selectedFilters) != -1 && value.music.search(selectedFilters) != -1) {
grid += '<div class="grid">' +
'<div class="card card-video">' +
'<div class="row">' +
'<div class="col-12">' +
'<div class="video-thumbnail" style="background: url(' + value.image + '); background-size:cover; background-position:center; background-repeat:no-repeat;">' +
'<div class="noted">' +
'<div class="time">28:36</div>' +
'<div class="category">' + value.type + '</div>' +
'</div>' +
'<div class="user-img">' +
'<div class="image" style="background: url(' + value.users + '); background-size:cover; background-position:center; background-repeat:no-repeat;"></div></div>' +
'</div>' +
'</div>' +
'<div class="col-12">' +
'<div class="description">' +
'<div class="name">' +
'<p>' + value.name + '</p>' +
'</div>' +
'<div class="title">' + value.title + '</div>' +
'<div class="statistic subtitle d-flex">' +
'<p>Views 132k</p>' +
'<p>2 Days Ago</p>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
}
$('#video-result').hide().append(grid).fadeIn();
});
});
});


Aucun commentaire:
Enregistrer un commentaire