Olá devs, tudo bem? Queria entender melhor explicado como a condição ternária, nesse código específico, funciona. Como a condição diz em qual lugar vai ficar o display: block e o display: none?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Olá devs, tudo bem? Queria entender melhor explicado como a condição ternária, nesse código específico, funciona. Como a condição diz em qual lugar vai ficar o display: block e o display: none?
Oii João, tudo bem?
A condição ternária, ou operador condicional, é uma maneira mais concisa de escrever uma instrução if...else. Ela recebe esse nome por ser o único operador com três operandos: uma condição, um valor se a condição for verdadeira e um valor se a condição for falsa.
Imagine que temos um elemento HTML que queremos mostrar ou esconder baseado em alguma condição. Podemos usar a condição ternária para alterar o valor da propriedade display do CSS desse elemento:
elemento.style.display = condição ? 'block' : 'none';
Nesse caso, se a condição for verdadeira, o display do elemento será definido como 'block', fazendo com que ele seja exibido. Se a condição for falsa, o display será definido como 'none', escondendo o elemento.
Pra deixar mais claro vamos voltar à sua pergunta sobre como a condição ternária funciona:
Suponha que você tenha uma lista de itens e queira exibir apenas os itens que estão marcados como "ativos". Você pode usar uma condição ternária para verificar se cada item está ativo e definir seu estilo de exibição de acordo:
// Definindo a lista de itens
const itens = document.querySelectorAll('.item');
// Iterando sobre os itens e ajustando o estilo de exibição com base na propriedade "ativo"
itens.forEach(item => {
item.style.display = item.getAttribute('ativo') === 'true' ? "block" : "none";
});
Neste caso, item.ativo é a condição que tá sendo avaliada. Se item.ativo for verdadeiro, o item será exibido (display: block), caso contrário, será oculto (display: none).
Você pode conferir aqui no CodePen o exemplo que criei com o código completo.
Um abraço e bons estudos.