Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Felipe Paz

Jquery - seletor de div

Recommended Posts

Felipe Paz    53

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
Felipe Paz    53
  • Autor do tópico
  • 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
    Felipe Paz    53
  • Autor do tópico
  • 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






    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

    ×