Ir para conteúdo

POWERED BY:

Arquivado

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

Luc.Vysk

Javascript "dinamico" de acordo com a Div

Recommended Posts

Olá gente, novamente estou aqui querendo uma ajuda.

Eu tenho uma página produtos, e quero que quando a pessoa passar o mouse em cima da imagem, apareça uma div, em cima da respectiva imagem, com a escrita "Veja mais".

 

No entanto, não consegui controlar ela, está aparecendo em todos os produtos. Tentei fazer pelo id, mas também não consegui.

 

Javascript:

function sprodl() {

$('.prod_img').hover(
function () {
	$('.prod_link').fadeIn('fast');	
}, function() {
	$('.prod_link').fadeOut('fast');	
});

}

 

HTML:

 

<div class="prod_img" id="prod-<?php the_ID(); ?>">
<?php 		  
if ( has_post_thumbnail()) {
	echo '<a id="post-'.$post->ID.'" title="' . the_title_attribute('echo=0') . '">';
	echo get_the_post_thumbnail($post->ID, 'feature'); 
	echo '</a>';
}

?>
<div id="prod_link-<?php the_ID(); ?>" class="prod_link"><a href="<?php echo get_permalink(); ?>">Veja mais</a></div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Estude sobre o objeto this

 

 

leitura:

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Pois é, eu procurei fazer de várias maneiras com o método "this", no entanto não consegui. Pois não é quando clica, e sim passa o mouse em cima.

 

Cheguei até conseguir mostra o id da div (prod-12), mas ainda não consegui mostrar a div 'veja mais' do modo certo.

Acredito que tenha errado nessa chamadas do CSS para Jquery.

 

Você consegueria exemplificar isso para mim no meu caso William? Por favor

Compartilhar este post


Link para o post
Compartilhar em outros sites
       $('.prod_img').hover(
       function () {
               $( this ).next('.prod_link').fadeIn('fast'); 
       }, function() {
               $( this ).next('.prod_link').fadeOut('fast');        
       });

tanto faz o evento.. o importante é o conceito.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu não entendi o pq do "next". E ainda assim isso funcionaria para todas as divs, não?

 

O que quero fazer é que na lista de todos os produtos, quando você passar o mouse em cima da imagem dele, apareça umk botão no respectivo produto "veja mais".

 

Havia tentado algo como colocar na div(html):

 

onmouseover="sprodl($id)"

 

e no js:

 

function sprodl(this.$id) {        

...

}); 

 

Algo dessa forma, pois não posso lhe confirmar ao certo pois não estou em casa, desculpe. No entanto apesar de conseguir pegar o id da Div, não consegui fazer com que a div aparecesse.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu não entendi o pq do "next".

você testou ? teste.

 

E ainda assim isso funcionaria para todas as divs, não?

veja:

http://api.jquery.com/next/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Testei e não saiu nada. Mas eu consegui desta maneira:

 

 

 

<div class="prod_img" id="imgprod-<?php the_ID(); ?>" onmouseover="sprodl(this.id)">

...

<div id="link-imgprod-<?php the_ID(); ?>" class="prod_link"><a href="<?php echo get_permalink(); ?>">Veja mais</a></div>

 

 

function sprodl($id) {

$('#'+$id).hover(

function () {
	 $('#link-'+$id).fadeIn('fast');	
}, function() {
	 $('#link-'+$id).fadeOut('fast');	
});

}

 

No entanto, tem um pequeno problema. Quando eu passo o mouse em cima do produto pela primeira vez não funciona no Firefox. Só funciona na segunda. Sabe qual pode ser o motivo desse problema?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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