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

Thanks in advance for helping me out (for those who have time and are willing).

提前谢谢你帮助我(为了那些有时间和愿意帮助我的人)。

I've written 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 onto this page http://www.fraservalley-webdesign.com/portfolio/test.php.

然后把它放到这个页面上:http://www.fraservalley-webdesign.com/portfolio/test.php。

It works except it of course shows/hides on every element with the appropriate classes, not just the one I'm hovering over. I can't uniquely name each one as there will be dozens and it will be database driven content.

它可以工作，但它当然会显示/隐藏在每个元素上，并带有适当的类，而不仅仅是我悬停的那个类。我不能唯一地命名每一个，因为将有几十个，它将是数据库驱动的内容。

Does anyone know a simple way to isolate the item I'm hovering over within the script?

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

Does this make sense?

这是否有意义吗?

4 个解决方案

#1

The variable "this" is bound to the triggering element in the mouseover and mouseout handlers, so you can say something like

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

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

to hide the elements with class "foliobtn" inside the triggering element.

在触发元素中隐藏具有“foliobtn”类的元素。

#2

You can use another function as a callback, this would effectively act as a toggle of sorts, and make your code simpler.

您可以使用另一个函数作为回调函数，这将有效地充当各种类型的切换，并使您的代码更简单。

Give this a shot:

给这一枪:

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

});

You also don't need to return false in this case because the browser has no default behavior for this element.

在这种情况下，您也不需要返回false，因为浏览器没有这个元素的默认行为。

return false is more appropriate for something like click for an <a> or a form submit, but really you'd probably want to use preventDefault() instead.

return false更适用于诸如单击或表单提交之类的内容，但实际上您可能希望使用preventDefault()。

#3

You should use the jquery bind method:

您应该使用jquery绑定方法:

Something like

类似的

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

在这里，您不改变基于类的所有元素的可见性，但是使用这个类和当前节点找到一个元素。

#4

Could you try this?

你可以试试这个吗?

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

#1