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

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

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

4 个答案: