Tenho um site que contém alguns produtos com categoria. Escrevi um código que checa se as caixas de seleção de categoria estão selecionadas e mostra apenas os itens correspondente a ela.
O código funciona no Google Chrome do computador, mas não funciona nos navegadores de celular.
Alterei pra ele pintar de azul, mas no código original eu uso Display: block ou none;
Exemplo do meu código:
function filtrar()
{
var checks = document.getElementsByClassName("ContainerCaim");
var qtdCategoria = document.getElementById("produtos").getElementsByClassName("categoria").length;
var contProduto = document.getElementById("produtos").getElementsByClassName("categoria").length;
for(var x = 0; x < contProduto; x++)
{
document.getElementById("produtos").getElementsByClassName("categoria")[x].style.color = "black";
}
for(var i = 0;i < checks.length;i++)
{
if(checks[i].getElementsByTagName("input")[0].checked)
{
for(var ii = 0;ii< qtdCategoria; ii++){
if(document.getElementById("produtos").getElementsByClassName("categoria")[ii].innerText == checks[i].innerText)
{
document.getElementById("produtos").getElementsByClassName("categoria")[ii].style.display = "blue";
}
}
}
}
}
<div id="FiltroCaimentos" style="display: inline-block;margin-top: 50px;">
<label class="containerCaim">Skinny
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="containerCaim">Straight
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="containerCaim">Slim
<input type="checkbox">
<span class="checkmark"></span>
</label>
<button onclick="filtrar()">Filtar</button>
<br>
<br>
<br>
<div id="produtos">
<div class="categoria">Skinny</div>
<div class="categoria">Straight</div>
<div class="categoria">Slim</div>
</div>