jquery mouseenter individual para elementos

Estoy trabajando en un guión de votación “arriba, abajo”. Cuando el usuario, por ejemplo, se desplaza sobre el botón “Arriba”, la información sobre herramientas debería aparecer sobre el botón correspondiente y decir “Te gusta esta publicación” o lo que sea. Sin embargo, la información sobre herramientas se desvanece en todos los botones.

El script es más largo pero aquí está la parte de información sobre herramientas.

$(document).ready(function() { $('.vote').mouseenter(function(e) { var vote_status = $(this).attr("name"); $('.tooltip').fadeIn(200); if( vote_status = "up" ) { $('.tooltip').html('You like this post'); } if ( vote_status = "down" ) { $('.vp_tooltip').html('You dislike this post'); } }) .mouseleave(function(e) { $('.tooltip').fadeOut(200); }); }); 

HTML ..

 
<a name="up" class="vote" id="">Up
<a name="down" class="vote" id="">Down

También, por alguna razón, no responde si votó “arriba” o “abajo”. En mouseenter muestra “No te gusta esta publicación” independientemente. No estoy seguro de qué es exactamente lo que estoy haciendo mal.

.tooltip aplica a ambas informaciones sobre herramientas, no solo a la que desea. Por lo tanto, está activando / desactivando ambas informaciones sobre herramientas al mismo tiempo cuando el puntero del mouse ingresa / deja solo una de ellas. Y si genera la misma ID tanto para el upvote como para el downvote, tendría ID duplicadas, lo que no es válido en HTML y dará lugar a problemas.

Recomiendo usar clases de HTML en lugar de atributos de name . ¿Sabías que puedes tener múltiples clases en un solo elemento? Solo sepárelos por espacios ( por ejemplo, class="vote up" ).

También envolvería todos los botones de voto en un div contenedor (para agruparlos) si habrá más de un conjunto en una página. (De esa manera, puede dar la ID a un solo elemento y acceder a ella usando .parent().attr('id') .)

  

Entonces, su código JavaScript podría verificar la existencia de estas clases. Tenga en cuenta que en el ejemplo de código siguiente, .prev() refiere al elemento inmediatamente anterior:

EDITAR: Se me ocurrió una buena página de demostración que muestra cuán útiles pueden ser las clases para los estilos CSS también.

 $(document).ready(function() { $('.vote') .mouseenter(function(e) { var vote = $(this), tooltip = vote.prev(); tooltip.fadeIn(200); if(vote.hasClass('up')) tooltip.html('You like this post'); if(vote.hasClass('down')) tooltip.html('You dislike this post'); }) .mouseleave(function(e) { $(this).prev().fadeOut(200); }); }); 

Esta línea:

 $('.tooltip').fadeIn(200); 

Está seleccionando ambos divs. Puede, por ejemplo, agregar un atributo de id y encontrarlos así: aquí hay una forma:

  if( vote_status = "up" ) { $('#tooltip_up').fadeIn(200); $('.tooltip').html('You like this post'); } 
Up

Cuando se habla de la información sobre herramientas actual, puede usar la función jquery prev () para obtener el nodo anterior … así que esto:

 $('.tooltip').fadeIn(200); 

se convierte en:

 $(this).prev().fadeIn(200); 

También puede almacenar eso en una variable ya que lo usa dos veces:

 var tooltip = $(this).prev() 

EDITAR

Aquí hay un ejemplo en jsfiddle