-2

Boa tarde galera, tudo bem?

Então, eu to precisando de uma ajudinha pra fazer esse código funcionar.

Eu basicamente preciso que quando esteja na pagina "body" e que a classe da pagina seja "cursos" a div apareça, e quando não for ela não precisa aparecer.

Eu escrevi esse código que chega a funcionar no console do Chrome, mas quando eu tento colocar ele direto no site não funciona... alguém pode me dar uma luz sobre isso?

eu tentei fazer de duas formas diferentes e nenhum deu certo

// Confere se tem a categoria no body e retorna um valor
var corpo = window.document.querySelectorAll("body.cursos").length;
// verifica se o valor é suficiente para a div aparecer
if (corpo >= 1) {
$('minhaDiv').show();
} else if (corpo == 0) {
$('minhaDiv').hide();
}
<body class="curso">
    <div id="minhaDiv" class="col-sm-12">
    <h1>TESTE</h1>
    </div>
    </body>

var corpo = window.document.querySelectorAll("body.cursos").length;

var some = window.document.querySelectorAll("div.minhaDiv");

if (corpo >= 1) {
some.style.display = 'block'
} else if (corpo == 0) {
some.style.display = 'none'
}
<body class="curso">
<div id="minhaDiv" class="col-sm-12">
<h1>TESTE</h1>
</div>
</body>

1 Resposta 1

0

Primeiro teu HTML esta errado ou teu JS esta errado, aqui contêm um ID id="minhaDiv":

<body class="curso">
<div id="minhaDiv" class="col-sm-12">
<h1>TESTE</h1>
</div>
</body>

Mas no teu JS esta usando div.minhaDiv que não é pra ID e sim para CLASSES.

Vale lembrar que IDs não podem se repetir. O querySelectorAll é para pegar vários elementos e não um só, se é para pegar o ID use o querySelector (sem All) ou getElementById, deve ficar assim:

var corpo = document.querySelectorAll("body.cursos").length;

var some = document.getElementById("minhaDiv");

if (corpo >= 1) {
    some.style.display = 'block';
} else {
    some.style.display = 'none';
}
<body class="curso">
<div id="minhaDiv" class="col-sm-12">
<h1>TESTE</h1>
</div>
</body>

Veja que ao carregar o elemento já é ocultado.

O document.getElementById("minhaDiv") pega UM unico elemento que tenha a ID, você pode até usar

var some = document.querySelector("#minhaDiv");

Mas querySelector seria mais indicado se precisar de um seletor mais complexo e não é o caso.

Nota: Não precisa checar se é "zero" no else, o primeiro IF já contem >=1, a exceção então só pode ser zero mesmo, afinal o .length só retorna 0 ou maior.


Resposta ANTES da edição da pergunta

O document.querySelectorAll("div.minhaDiv") pega vários elementos e não um só, tem que aplicar a um for acaso queira aplicar o display para todos elementos com a mesma classe, assim:

var corpo = document.querySelectorAll("body.category-cursos").length;
var some = document.querySelectorAll("div.minhaDiv");

if (corpo >= 1) {
    for (var i = 0, j = some.length; i < j; i++) {
        some[i].style.display = 'block';
    }
} else {
    for (var i = 0, j = some.length; i < j; i++) {
        some[i].style.display = 'none';
    }
}

Usando for, você também poderia usar para iterar:

[].forEach.call(some, function (elemento) {
     elemento.style.display = 'block';
});

E para navegador modernos (com suporte):

some.forEach(function (elemento) {
     elemento.style.display = 'block';
});

Recomendo que leia:

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 .