Geek Answers Handbook

JQuery Show / Hide by class when multiple elements contain the specified class

Thank you in advance for your help (for those who have the time and desire).

I wrote 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 on this page http://www.fraservalley-webdesign.com/portfolio/test.php .

It works, except that, of course, it shows / hides each element with the corresponding classes, and not just the one I am hanging over. I cannot unambiguously name each of them, since there will be dozens, and this will be database-driven content.

Does anyone know a simple way to isolate an element that I hang in a script?

It makes sense?

+5
4

"this" mouseover mouseout, -

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

"foliobtn" .

+7

, .

:

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

});

return false , .

return false - click <a> submit, , , preventDefault() .

+5

?

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

jquery :

-

$(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 do not change the visibility of all elements based on the class, but find the element using this class and the current node

0
source

More articles:


All Articles