6

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

我写了这个脚本：

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

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

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

这有意义吗？

4

4 回答 4

8

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

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

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

于 2009-12-18T23:59:57.200 回答
5

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

试一试：

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

于 2009-12-19T00:03:48.253 回答
0

你能试试这个吗？

$(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; });
于 2009-12-18T23:58:12.053 回答
0

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

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

于 2009-12-18T23:58:53.620 回答