jQuery Mostrar/Ocultar por clase cuando varios elementos contienen dicha clase

Question

Gracias de antemano por ayudarme (para aquellos que tienen tiempo y están dispuestos).

He escrito este guión:

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 
    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').mouseover(function() { 
    $('.foliobtn').show(); 
    return false; 
    }); 
    $('.foliobottom').mouseout(function() { 
    $('.foliobtn').hide(); 
    return false; 
    }); 
    $('.foliobottom').mouseover(function() { 
    $('.folionamedate').hide(); 
    return false; 
    }); 
    $('.foliobottom').mouseout(function() { 
    $('.folionamedate').show(); 
    return false; 
    }); 
}); 

y ponla en esta página http://www.fraservalley-webdesign.com/portfolio/test.php.

Funciona, excepto que, por supuesto, muestra/oculta en cada elemento con las clases apropiadas, no solo la que estoy revoloteando. No puedo nombrar de forma única a cada uno, ya que habrá docenas y será contenido basado en bases de datos.

¿Alguien sabe de una manera simple de aislar el elemento que estoy revolviendo dentro del script?

¿Tiene esto sentido?

Answer 1

La variable "this" está vinculada al elemento desencadenante en los manejadores mouseover y mouseout, por lo que puede decir algo como

$('.foliobtn',this).hide(); 

para ocultar los elementos con la clase "foliobtn" dentro del elemento desencadenante.

Answer 2

¿Podría probar esto?

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 

    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').mouseover(function() { $(this).show(); return false; }); 
    $('.foliobottom').mouseout(function() { $(this).hide(); return false; }); 

Answer 3

Se debe utilizar la jQuery bind method:

Algo así como

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 
    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').mouseover(function(e) { 
    $(this).find('.foliobtn').show(); 
    $(this).find('.folionamedate').hide(); 
    }); 
    $('.foliobottom').mouseout(function(e) { 
    $(this).find('.foliobtn').hide(); 
    $(this).find('.folionamedate').show(); 
    }); 
}); 

Aquí no se cambia la visibilidad de todos los elementos sobre la base de la clase, pero encuentra un elemento utilizando esta clase, y el nodo actual

Answer 4

Puede utilizar otra función como devolución de llamada, esto actuaría como un tipo de alternancia y simplificará su código.

dar a este un tiro:

$(document).ready(function() { 

    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 
    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').hover(function() { 
    $(this).find('.foliobtn').show(); 
    }, function() { 
    $(this).find('.foliobtn').hide(); 
    }); 

}); 

Es posible que no tenga que return false en este caso, ya que el navegador tiene ningún comportamiento predeterminado para este elemento.

return false es más apropiado para algo así como click para una <a> o presentar una forma, pero en realidad lo que probablemente quieren usar preventDefault() lugar.