0

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>

1 Resposta 1

0

Na hora que eu estava criando a pergunta, ao testar os códigos de exemplo acabei resolvendo meu problema.

Acontece que eu estava usando innerText sem tratamento (para remover espaços, por exemplo). No navegador do computador, parece que os nomes comparados não vinham com espaço, e no celular tinha.

Adicionei um .replace(/\s+/g, '') nas minhas comparações no innerText e funcionou em ambos navegadores.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .