JS code to give $('id'). Hide() and $('id'). show()

Asked

Viewed 42 times

-2

Good afternoon guys, all right?

So I need a little help to make this code work.

I basically need that when it is on the page "body" and that the class of the page is "courses" the div appear, and when it is not she does not need to appear.

I wrote this code that comes to work on the Chrome console, but when I try to put it right on the site does not work... someone can give me a light on this?

I tried to do it two different ways and none worked

// 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>

javascript jquery html5

1 answer

0


First your HTML is wrong or your JS is wrong, here contain an ID id="minhaDiv":

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

But in your JS is using div.minhaDiv which is not for ID but for CLASSES.

Remember that Ids cannot be repeated. querySelectorAll is to take several elements and not only one, if you want to get the ID use the querySelector (without All) or getElementById, should look like this:

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>

Note that when loading the element is already hidden.

The document.getElementById("minhaDiv") takes a single element that has the ID, you can even use it 

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

But querySelector would be more appropriate if you need a more complex selector and is not the case.

Note: No need to check if it is "zero" in else, the first IF already contains >=1, the exception then can only be zero even, after all the .length only returns 0 or greater.

Answer BEFORE the question is edited

The document.querySelectorAll("div.minhaDiv") takes several elements and not only one, has to apply to a for If you want to apply the display to all elements with the same class, so:

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';
    }
}

Using for, you could also use to iterate:

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

And for modern browser (with support):

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

I recommend you read:

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.