Ir para conteúdo

POWERED BY:

Arquivado

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

LevelMax

Ajude-me ! Varios elementos em um while. Quero pegar o valor de um

Por , em Javascript

Recommended Posts

LevelMax    0

LevelMax
Postado

Olá pessoal, meu primeiro post aqui e não queria fazer isso rsrs, mais tive que apelar.

Bom, tenho um conhecimento muito bom em várias linguagens mais tem uma coisa que ta me prendendo. È o seguinte:

 

To montando um projeto, nele tem um while na pagina principal com várias Divs com a mesma class=' '.

Até ai tudo bem !

Cada div tem um botão, nele ativa uma função que quando clicar eu mudo o background.

A dúvida esta ai, quando eu clico esta mudando a cor de todas as divs.

 

Antes que alguém¹ fale, estou usando class nas divs. Quero que apenas mude a que eu cliquei.

Antes que alguém² fale, isso foi um exemplo logo acima.

 

Se alguém n entendeu só comentar que vo da um exemplo melhor.

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrieldarezzo    255

gabrieldarezzo
Postado

Calma cara...
Desarma aí... a galera aqui é gente boa.

 

Monitorar eventos em JS é mamãozinho...

Para não mudar de todos de uma vez...

 

Uma forma seria percorrer todos os elementos por um seletor especifico (no seu caso a div/class) e adicionar um listener neles...

Quando evento X,Y,Z ocorrer você efetua a ação...

 

 

Um exemplo em JavaScript puro:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	<div id="blocos">
		<h3 class="itens">Item 1</h3>
		<h3 class="itens">Item 2</h3>
		<h3 class="itens">Item 3</h3>
		<h3 class="itens">Item 4</h3>
	</div>
	
	<script type="text/javascript">
		var classname = document.getElementsByClassName("itens");
		
		for (var i = 0; i < classname.length; i++) {
			classname[i].addEventListener('click', function() {
				
				this.style = 'background-color: #8a7b7b;';
			});
		}
	</script>
</body>
</html>

E agora em JQuery:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
	<div id="blocos">
		<h3 class="itens">Item 1</h3>
		<h3 class="itens">Item 2</h3>
		<h3 class="itens">Item 3</h3>
		<h3 class="itens">Item 4</h3>
	</div>
	
	
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			
			$( ".itens" ).each(function() {
				$( this ).bind( "click", function() {
					$( this ).css({'background-color' : '#8a7b7b'});
				});
			});
		});
	</script>
</body>
</html>

Ta vendo o 'this' ali n no Loop?!

Então nesse caso o primeiro é do laço te iteração...

E o segundo this significa especificamente aquele elemento. por isso podemos jogar um .css() nele....

 

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito