jQuery Показать / Скрыть по классу, когда несколько элементов содержат указанный класс

Question

Заранее спасибо за помощь (для тех, у кого есть время и желание).

Я написал этот скрипт:

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

и поместите его на эту страницу http://www.fraservalley -webdesign.com / portfolio / test.php .

Это работает, за исключением того, что, конечно, показывает / скрывает каждый элемент с соответствующими классами, а не только тот, над которым я нахожу курсор. Я не могу назвать однозначно каждое из них, так как их будут десятки, и это будет контент, управляемый базой данных.

Кто-нибудь знает простой способ выделить элемент, который я нахожу в скрипте?

Имеет ли это смысл?

Answer 1

Переменная «this» привязана к инициирующему элементу в обработчиках mouseover и mouseout, поэтому вы можете сказать что-то вроде

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

чтобы скрыть элементы с классом "foliobtn" внутри инициирующего элемента.

Answer 2

Вы можете использовать другую функцию в качестве обратного вызова, это будет эффективно действовать как своего рода переключение и сделает ваш код проще.

Дайте этому шанс:

$(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> или для отправки формы, но на самом деле вы, вероятно, захотите использовать preventDefault() вместо.

Answer 3

Вы должны использовать 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();
  });
});

Здесь вы не изменяете видимость всех элементов, основанных на классе, но находите элемент, используя этот класс и текущий узел

Answer 4

Не могли бы вы попробовать это?

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