Atribuir efeito para classes diferentes

[Guilherme Oderdenge 42]

Olá.

 

Tenho várias divs com classes diferentes, e para cada uma delas eu gostaria de exibir um botão ao passar o mouse, entretanto, essas divs tem conteúdo diferente.

 

Em outras palavras é o seguinte: tenho uma imagem, e cada imagem tem uma classe diferente, quero que ao passar o mouse apareça um botão para removê-la. Então, gostaria de remover apenas a imagem em que eu passei o mouse. Eu tenho o código em PHP, funcionando perfeitamente, só gostaria de pegar essas classes diferentes que estão em um foreach, enviar para o Javascript, e fazer com que ele execute uma ação a cada classe que ele pegar.

 

Voces tem uma ideia de como fazer isso?

 

Desde já, grato.

Abraços!

[Thiago Retondar 18]

Cara, entendi e não entendi o que você quer fazer...

 

Entendi que você quer que ao passar o mouse em cima da imagem, apareça um botão para remover a mesma, mas o que eu não entendi foi o que as classes diferentes fazem nessa história. Elas são a referência com o BD?

 

:thumbsup:

[Jhony ZaM 1]

Eu tbm nao entendi ahuahauhauhau

 

Ao meo ver voce nao consegue distinguir as classes para usar no JS.

 

Se for isso, é provavel que esteja utilizando um for ou um foreach, use uma variavel auto increment como fim do id, ou da classe em si, sua classe sera diferenciada por esse ultimo valor, e ao quere excluilo repita o passo soh que em JS usando um FOR

 

Aguardo...

[William Bruno 1501]

se é q eu entendi, isso aqui resolve:

http://wbruno.com.br/blog/2011/06/21/afinal-e-javascript/

[Guilherme Oderdenge 42]

Olá.

 

Obrigado pelas respostas, mas acho que não consegui aproveitar nenhuma.

 

O que acontece é o seguinte: tenho uma galeria de imagens onde os usuários podem upar fotos pra lá. Cada foto tem seu id (dã), e eu atribui esse ID como uma classe para cada imagem. Ou seja, imagem UM tem a classe UM, imagem DOIS tem a classe DOIS... e assim por diante.

 

Então, o botão exibir eu consegui fazer, mas não consegui fazer com que esse botão só seja exibido apenas para a imagem em questão. Ou seja, se passou o mouse encima da imagem 1, apareça o botão para removê-la apenas na imagem 1. Entenderam?

 

Sim, imagino que eu devo fazer um for ou um foreach, só não sei como fazê-lo.

 

Desde já, grato - novamente.

Abraços!

[William Bruno 1501]

é oque eu coloquei no link.

 

usando o objeto this, você leu ?

[Guilherme Oderdenge 42]

Olá, WBruno.

 

Li seu script sim, e parece atender o meu caso que, infelizmente, equivoquei em postar a minha resposta. Mas você está utilizando classes iguais. Posso fazer o que seu script sugeren, mas, no meu caso, se eu utilizasse uma classe só, poderia usar o $(this) para executar a ação somente para a imagem em questão?

 

Desde já (nova, nova e novamente) obrigado.

Abraços!

[William Bruno 1501]

Sim, use a mesma class para todas as imagens, e então use o THIS, para referenciar a imagem atual.

 

exatamente oque está no link que postei.

[Guilherme Oderdenge 42]

Olá, William.

Estudei, estudei e estudei o seu tópico, e consegui chegar ao resultado em parciais.

 

Vamos lá... dei a classe ".excluirimg" para todas as imagens da minha galeria e, ao passar o mouse, quero exibir o botão. Belê, pra exibir apenas na imagem que eu desejo, preciso usar o THIS, mas como devo indicar isso no meu caso?

 

Debugando eu consegui fazer funcionar o this, mas não consigo pensar em como exibir o botão. Veja:

               $(".excluirimg").mouseenter(function(){
                   $(this).fadeOut();
               });

 

O script acima funciona que é uma beleza. Passou o mouse, FadeOutZou! Agora, se eu quero exibir o botão, antes eu fazia assim:

               $(".excluirimg").mouseenter(function(){
                      $(".remover").fadeTo(0, 0.5);
                      $(".remover").mouseenter(function(){
                        $(this).fadeTo(0, 1.0);
                   });
                   $(".remover").mouseleave(function(){
                      $(this).fadeTo(0, 0.5);
                   });
               });

 

Mas, exibia o botão em todas as imagens. Tem alguma ideia do que eu devo fazer para, neste caso, poder usar o THIS?

 

Desde já, grato.

Abraços!

[William Bruno 1501]

então cara.. poste um html.. de uma imagem o container dela, e o botão.

 

agora você vai varrer o DOM, usando .next(), .find(), .parent()... exatamente como continuo a demonstração no post q linkei aqui.

 

você notou que lá eu uso essas funções ? você vai precisar delas tb.

[Guilherme Oderdenge 42]

Sim, WBruno, eu lembro. Até tentei usar, mas fiquei perdido pois não sabia suas funcionalidades. Procurei na documentação do jQuery, mas fiquei mais perdido ainda.

 

A baixo, o HTML:

           <ul>
               <?php while($GalleryDAO->data = $GalleryDAO->query->fetch( PDO::FETCH_ASSOC )): ?>
                   <li>
                       <?php if($UserDAO->getUid() == $_SESSION['uid']): ?>
                           <a class="remover" href="index.php?pagina=remover-imagem&id=<?php echo $GalleryDAO->getImageId(); ?>">×</a>
                       <?php endif; ?>

                       <a id="pictures" rel="group1" title="<?php echo $GalleryDAO->getLegenda(); ?>" href="<?php echo $GalleryDAO->getImageURL(); ?>" target="_blank">
                           <img class="excluirimg" src="<?php echo $GalleryDAO->getImageThumb(); ?>" alt="Imagem de <?php echo $UserDAO->getNome(); ?>" /></a>
                   </li>
               <?php endwhile; ?>
           </ul>

[William Bruno 1501]

se eu entendi, é isso aqui que você quer:

 

 

$(".excluirimg").mouseenter(function(){
   $( this ).fadeOut();
});
$(".remover").mouseenter(function(){
   $( this ).fadeIn();
});
$(".remover").click(function(){
   $( this ).parent('li').remove();
});

[Guilherme Oderdenge 42]

Negativo.

 

Não quero dar fade na imagem. Quero apenas exibir a classe "remover" ao passar o mouse em "excluirimg".

[William Bruno 1501]

Então, é isso aqui:

 

$(".excluirimg").mouseenter(function(){
   $( this ).parent('a').parent('li').find('.remover').fadeIn();
});