Jquery - seletor de div

Felipe Paz · 5 de janeiro de 2017

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");
		});
	}
});

JonathanMMachado · 5 de janeiro de 2017

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.

Felipe Paz · 6 de janeiro de 2017

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; 
		}
	});
});