当多个项目包含所述类时，jQuery 按类显示/隐藏

Posted 2023-05-08

【中文标题】当多个项目包含所述类时，jQuery 按类显示/隐藏

【英文标题】：jQuery Show/Hide by class when multiple items contain the said class

【发布时间】：2010-12-28 05:31:43

【问题描述】：

提前感谢您帮助我（对于那些有时间并愿意的人）。

我写了这个脚本：

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

它可以工作，但它当然会显示/隐藏具有适当类的每个元素，而不仅仅是我悬停的那个。我无法唯一命名每一个，因为会有几十个，而且都是数据库驱动的内容。

有谁知道一种简单的方法来隔离我在脚本中悬停的项目？

这有意义吗？

【问题讨论】：

是的，这是有道理的，答案是：不要那样做。如果您不想隐藏使用该类的所有元素，请不要按类隐藏。使用不同的选择器。 （这个有效）

【参考方案1】：

变量“this”绑定到 mouseover 和 mouseout 处理程序中的触发元素，所以你可以这样说

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

在触发元素内隐藏类“foliobtn”的元素。

【参考方案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()。

【参考方案3】：

你应该使用 jquery bind method:

类似

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

这里你不会根据类改变所有元素的可见性，而是使用这个类和当前节点找到一个元素

【参考方案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; );

【讨论】：

为什么返回false？您还重复了一些行。

啊，是的，我只是复制了问题中的代码并进行了编辑。来晚了。