Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

DiogoJefferson

Como identificar o índice do elemento que foi clicado?

Recommended Posts

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!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.