Olá.
Tenho o seguinte código: JsFiddle
Nele eu tenho 6 checkbox de 0 a 5 estrelas, e quando clico em um checkbox ele filtra um json exibindo o hotel que tem tal estrela ate ai tudo bem. O problema vem quando seleciono mais de 1 estrela.
Ex: Se eu selecionar 1 estrela, 4 estrelas e 0 estrelas preciso que me retorne todos os hoteis que tem 1, 4 e 0 estrelas.
E supondo que os checkbox 1, 4 e 0 estejam selecionados, e se eu desmarcar o 0 preciso que so retorno os hoteis com 1 e 4 estrelas. E assim por diante.
Alguem saberia como posso resolver isso?
Primeiramente o evento que está utilizando para verificar se um checkbox foi selecionado não é o mais correto (click
). Para tal ação, é melhor utilizar o change
:
$("input[name='estrelas']").on('change', function(){ ...});
Para solucionar o problema de retirar a acrescentar um hotel à lista final, adicionei uma variável que diz se o item foi selecionado ou não na função filtro
:
function filtro(valor, selecionado) {...}
Esse valor vem da propriedade checked
do elemento que está recebendo o evento change
mencionado acima. No caso podemos referenciar esse elemento com o this
:
filtro(value, this.checked);
Para mantermos o status de elementos selecionados entre os eventos de seleção, criei uma variável global chamada hotels
, que conterá os hotéis selecionados:
var hotels = [];
Essa variável será preenchida dentro da função filtro
, dependendo do valor selecionado
:
if (selecionado) {
Array.prototype.push.apply(hotels, json.hotelPesquisa.filter(function(hotel) {
return hotel.hotel.qtEstrela == valor;
}));
} else {
hotels = hotels.filter(function(hotel) {
return hotel.hotel.qtEstrela != valor;
});
}
Caso o valor passado para a função filtro
tenha sido selecionado, utilizamos o método apply
para fazermos o merge de um array com outro array. Outra alternativa para esse passo é utilizar o método concat
:
hotels = hotels.concat(json.hotelPesquisa.filter(function(hotel) {
return hotel.hotel.qtEstrela == valor;
}));
Caso o usuário tenha removido a seleção do valor, ou seja o valor this.checked == false
, então apenas filtramos o array hotels
e ficamos com os valores que não sejam o valor que o usuário removeu:
hotels = hotels.filter(function(hotel) {
return hotel.hotel.qtEstrela != valor;
});
Segue o JSFiddle com a solução: https://jsfiddle.net/xrkuoqhq/9/
As respostas fornecidas pelos amigos @PanterA e @Everson, estão corretas e produzem o resultado esperado, porém eu faria uma abordagem mais simples.... Você já tem um objeto que contém as Estrelas Selecionadas, o próprio Array de Objetos CheckBox, sendo assim só é necessário verificar na função filtro, quais são os CheckBox Selecionados, e se o valor dele é igual ao do hotel que está sendo filtrado.
function filtro(valor) {
var filtrados = json.hotelPesquisa.filter(function(hotel) {
var objEstrelas = $('[name=estrelas]');
for(var i=0; i < objEstrelas.length; i++) {
if ( (objEstrelas[i].checked==true) && (objEstrelas[i].value==hotel.hotel.qtEstrela) ) {
return true;
}
}
return false;
});
$("#resultado").html(JSON.stringify(filtrados));
}