当多个项目包含所述类时,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()来代替.