jQuery Show/Hide by class when multiple items contain the said class

Question

Thanks in advance for helping me out (for those who have time and are willing).

I've written this script:

$(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;
  });
});

and put it onto this page http://www.fraservalley-webdesign.com/portfolio/test.php.

It works except it of course shows/hides on every element with the appropriate classes, not just the one I'm hovering over. I can't uniquely name each one as there will be dozens and it will be database driven content.

Does anyone know a simple way to isolate the item I'm hovering over within the script?

Does this make sense?

Answer 1

Could you try this?

$(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 2

You should use the jquery bind method:

Something like

$(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();
  });
});

Here you don't change visibility of all elements based on the class, but find an element using this class, and the current node

Answer 3

The variable "this" is bound to the triggering element in the mouseover and mouseout handlers, so you can say something like

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

to hide the elements with class "foliobtn" inside the triggering element.

Answer 4

You can use another function as a callback, this would effectively act as a toggle of sorts, and make your code simpler.

Give this a shot:

$(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();
  });

});

You also don't need to return false in this case because the browser has no default behavior for this element.

return false is more appropriate for something like click for an <a> or a form submit, but really you'd probably want to use preventDefault() instead.