Ir ao conteúdo
  • Cadastre-se
Felipe Paz

Jquery - seletor de div

Recommended Posts

E aí gurizada, beleza? Estou criando uma página e nela constam 5 divs, cada uma conterá um texto e uma foto, basicamente. Mas eu gostaria de que quando clicasse sobre a div, abrisse a página da respectiva div, porém, não estou conseguindo acertar meu jquery para que consiga capturar a div clicada.

Código html >> (esse código vai ser gerado pelo banco de dados posteriormente)

<div class="new_garota" style="margin-left: 0;" id="1">
	<div class="garota_dados">
    	<p>Nome da garota</p>
	</div>
<div class="new_garota" data-id="2">
	<div class="garota_dados">
		<p>Nome da garota</p>
	</div>
</div>
<div class="new_garota" data-id="3">
	<div class="garota_dados">
		<p>Nome da garota</p>
	</div>
</div>
<div class="new_garota" data-id="4">
	<div class="garota_dados">
		<p>Nome da garota</p>
	</div>
</div>
<div class="new_garota" data-id="5">
	<div class="garota_dados">
		<p>Nome da garota</p>
	</div>
</div>

E o jquery >>>

$(document).ready(function(){

	//alert("Ola");
	var div = $(this).data("id");
	if(div == "new_gatora") {
		$(".new_garota").mouseover(function(){
			$(".new_garota").css("filter", "grayscale(100%)");
			$(".garota_dados").css("background", "transparent");
			$(".garota_dados p").css("color","#C008EE");
			//alert("Funcionando");
		});
		$(".new_garota").mouseleave(function(){
			$(".new_garota").css("filter", "grayscale(0%)");
			$(".garota_dados").css("background", "gray");
			$(".garota_dados").css("color","#red");
			//alert("Funcionando");
		});
	}
});

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá, vamos por partes, primeiro você criou uma variável no escopo global, e em nenhum momento ela "muda" então, o navegador vai ler o jquery pela primeira vez e então essa variável nunca vai ser modificada de novo. Nessa parte:

3 horas atrás, Felipe Paz disse:

var div = $(this).data("id");

 

A maneira que eu faria seria você criar uma classe para todas as div's, então dentro delas criar um atributo qualquer, onde terá os números (1,2,3,4 e 5), depois você cria uma ação de click atrelada a classe e dentro dela você verifica qual é o número do atributo e toma as devidas medidas. Ex:

$(document).ready(function(){
	$(".new_garota").click(function(){
		var num_garota = $(this).attr('data-id');
		switch(num_garota){
			case 1:
				alert('Está é a garota 1');
				break;
			case 2:
				alert('Está é a garota 2');
				break;
			case 3:
				alert('Está é a garota 3');
				break;
			case 4:
				alert('Está é a garota 4');
				break;
			case 5:
				alert('Está é a garota 5');
				break;
		}
	});
});

 

Só uma observação, caso você faça do meu modo:

 

3 horas atrás, Felipe Paz disse:

<div class="new_garota" style="margin-left: 0;" id="1">

ao invés de usar o id, você deveria mudar para data-id aqui.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Deu certo em partes, no trecho

var num_garota = $(this).attr('data-id');

eu troquei por

var id = $(this).data('id');

mas o que eu preciso mesmo é que quando o jquery capturar o valor do id, a respectiva div pegue os efeitos do css. Digamos, passei o mouse sobre o div de número 1, essa div vai receber o efeito filter grayscale, por exemplo.

Este é o código que eu to tentando.

$(document).ready(function(){
	$(".new_garota").on('click', function(){
		var id = $(this).data('id');
		switch(id) {
			case 1:
				//alert("Id " + id);
				$(".new_garota").mouseover(function(){
					$(".new_garota").css("filter", "grayscale(100%)");
					$(".garota_dados").css("background", "transparent");
					$(".garota_dados").css("color", "green");
				});
				break;
			case 2: 
				alert("Id " + id);
				break;
			case 3:
				alert("Id " + id);
				break;
			case 4:
				alert("Id " + id);
				break;
			default: ("Id " + id);
				alert("Id " + id);
				break; 
		}
	});
});

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acabei resolvendo tudo com apenas css. Exatamente o efeito que eu queria eu resolvi utilizando css. Obrigado pela atenção.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×