当多个项目包含所述类时，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

你能试试吗？

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

您应该使用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();
  });
});

在这里，您不会根据类更改所有元素的可见性，而是使用此类和当前节点查找元素