Publicado em 30 de mar.

Como identificar o índice do elemento que foi clicado?

Olá!

Tenho 5 divs com a seguinte configuração:

<div id="vetor[]" onClick="Teste()" style="height:50px; width:300px; border:1px solid #F00; display:block;">
</div>

<div id="vetor[]" onClick="Teste()" style="height:50px; width:300px; border:1px solid #F00; display:block;">
</div>

<div id="vetor[]" onClick="Teste()" style="height:50px; width:300px; border:1px solid #F00; display:block;">
</div>

<div id="vetor[]" onClick="Teste()" style="height:50px; width:300px; border:1px solid #F00; display:block;">
</div>

<div id="vetor[]" onClick="Teste()" style="height:50px; width:300px; border:1px solid #F00; display:block;">
</div>

Reparem que as 5 divs estão visíveis (display: block). Ao clicar em uma delas, preciso mudar seu display para 'none' dentro de uma função js chamada "teste".

E então pessoal, como ficaria a minha função Teste?

Obrigado pela atenção!

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Maykel-ctba· 30 de mar.

Cara, primeiro, você já montou errado. ID é pra ser único.

Tomei a liberdade de reescrever seu código.

Com jQuery isso é facilmente feito.

<div class="vetor"></div>
<div class="vetor"></div>
<div class="vetor"></div>
<div class="vetor"></div>
<div class="vetor"></div>
<style>
	.vetor { height:50px; width:300px; border:1px solid #F00; display:block; }
</style>
<script>

	$(function(){
 $(".vetor").click(function(){
 Teste();
 });
	});

	function Teste(){
 alert("Clicado!");
 $(this).css("background","yellow");
	}

</script>

Marco Bruno· 31 de mar.

Boa tarde, Diogo e Maykel.

Diogo, o que o Maykel cometou sobre o id ser único é bem importante. O id funciona da seguinte maneira, você não pode ter em uma mesma página, mais de um elemento HTML com o mesmo valor de id. Exemplo:

HTML

<!DOCTYPE html>

<html>
 <head>
 <meta charset="uft-8">
 <title>Exemplo de como utilizar o ID</title>
 </heade>
 <body>
 <header>
 <nav>
 <ul>
 <li id="header-menu-item">
 <a href="index.html">Home</a>
 </li>
 <li id="header-menu-item">
 <a href="index.html">Produtos</a>
 </li>
 <li id="header-menu-item">
 <a href="index.html">Sobre</a>
 </li>
 <li id="header-menu-item">
 <a href="index.html">Contato</a>
 </li>
 </ul>
 </nav>
 </header>

 <!-- Mais códigos abaixo -->
 </body>
</html>

Quando você tiver que utilizar o mesmo valor de id para mais de um elemento na mesma página, neste caso você deve utilizar o atributo class. Sendo assim, o código acima fica da seguinte maneira:

HTML

<!DOCTYPE html>

<html>
 <head>
 <meta charset="uft-8">
 <title>Exemplo de como utilizar o ID</title>
 </heade>
 <body>
 <header>
 <nav>
 <ul>
 <li class="header-menu-item">
 <a href="index.html">Home</a>
 </li>
 <li class="header-menu-item">
 <a href="index.html">Produtos</a>
 </li>
 <li class="header-menu-item">
 <a href="index.html">Sobre</a>
 </li>
 <li class="header-menu-item">
 <a href="index.html">Contato</a>
 </li>
 </ul>
 </nav>
 </header>

 <!-- Mais códigos abaixo -->
 </body>
</html>

Outro ponto importante é tentar ao máximo não misturar as camadas: HTML, CSS, JavaScript.

Responsabilidade do HTML:

- Conteúdo;

- Marcação(tag);

- Semântica;

Estrutura(HTML5).

Responsabilidade do CSS:

Visual;

Animação(CSS3). *Sim animação visual, mas só começou a ter no CSS3

Responsabilidade do JavaScript:

Interação;

Comportamento.

Agora! Vamos responder sua dúvida inicial.

Só para o exemplo ficar um pouco mais real, vamos considerar que cada div do seu código é uma li de um menu de navegação, conforme o código abaixo:

HTML

<!DOCTYPE html>

<html>
 <head>
 <meta charset="uft-8">
 <title>Exemplo de como utilizar o ID</title>

 <link rel="stylesheet" href="css/main.css">
 </heade>
 <body>
 <header class="header">
 <nav class="header-menu">
 <ul>
 <li class="header-menu-item">
 <a href="index.html">Home</a>
 </li>
 <li class="header-menu-item">
 <a href="index.html">Produtos</a>
 </li>
 <li class="header-menu-item">
 <a href="index.html">Sobre</a>
 </li>
 <li class="header-menu-item">
 <a href="index.html">Contato</a>
 </li>
 </ul>
 </nav>
 </header>

 <!-- Mais códigos abaixo -->

 <!-- Esse JavaScript segue abaixo -->
 <script src="js/main.js"></script>
 </body>
</html>

Obs. Por padrão o valor da propriedade CSS display de uma li é block.

CSS

.hidden {
 display: none;
}

Agora vamos para o JavaScript, que vai realizar o seguintes passos:

- Ouvir o evento de clique no pai de todas as **lis**, que neste caso é o elemento **nav **que possui a classe **header-menu**;

- Remover a classe **hidden **de todas **lis**;

Adicionar a classe hidden na li que foi clicada.

JavaScript

var $headerMenu = document.querySelector('.header-menu');

$headerMenu.addEventListener('click', function(event) {
 var $origem = event.target;

 if ($origem.tagName == 'LI') {
 var $headerMenuItem = document.querySelectorAll('.header-menu-item');
 var max = $headerMenuItem.length;

 for(var index = 0; index < max; index++) {
 $headerMenuItem[index].classList.remove('hidden');
 };

 $origem.classList.add('hidden');
 };
});

Qualquer dúvida só falar.

[]'s

Marco Bruno.

Rafael Sirotheau· 31 de mar.

Excelente explicação, Marco. Não misturar as camadas é importantíssimo e vejo que muitos, incluindo eu, não 'ensinamos' isso aos novatos que vem tirar dúvidas. Acabo focando em, simplesmente, solucionar o problema. O que é bom para os preguiçosos com dúvidas mas extremamente ruim pros realmente interessados.

Gostaria apenas de fazer uma correção:

Obs. Por padrão o valor da propriedade CSS display de uma li é block.

O valor padrão do display de um <li> é list-item, conforme defino pela W3C.

E, Diogo, contribuindo sem entrar no mérito de "dos and don'ts", tenta o seguinte:

1. Altera os onclick="Teste()" para **onclick="Teste(this)"**
2. Sua função ficara assim:

function Teste(e) {
 e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}

Além, claro, de ajustar seu código para não repetir IDs.

Abs!

DiogoJefferson· 17 de abr.

Obrigado caros!

Resolveu!