3

我在一个页面上显示了一堆来自用户的帖子。我有一个类名为“posts”的主要父 div，每个帖子都输出到一个类名为“row”的 div 中。所以在 div.posts 中有很多 div.row。每个看起来都是这样的。

<div class="row clearfix">
    <div class="left-column">
        <img src="..." title="" />
    </div>
    <div class="main-column">
        <div class="row-text">Post Text...</div>
        <div class="row-date">Posted Date...</div>
    </div>
    <div class="actions-column">
        <a href="#">Link</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3 etc.</a>
    </div>
</div>

通过 CSS，actions-column 默认设置为 display:none。当用户将鼠标悬停在帖子 (div.row) 上时，我想显示操作列。我最初的做法是为每一行设置一个鼠标悬停，这会对浏览器造成影响并减慢速度。我做了一些研究，偶然发现了事件委托，并决定试一试。到目前为止，我能够确定哪一行被定位，但是，我无法弄清楚如何使用“actions-column”类来定位它的子div。

到目前为止的代码...

$(window).load(function(){

    $('.posts').mouseover(function(e){
        var $row, $tgt = $(e.target);

        if ($tgt.hasClass("row")) {
            $row = $tgt;
        } else { 
            if ($tgt.parent().parent().hasClass('row'))
                $row = $tgt.parent().parent();

            else if ($tgt.parent().hasClass('row'))
                $row = tgt.parent();    

            else
                return false;       
        }

        //code here to select div.actions-column and show it

    });

    $('.posts').mouseover(function(e){
        var $row, $tgt = $(e.target);

        if ($tgt.hasClass("row")) {
            $row = $tgt;
        } else { 
            if ($tgt.parent().parent().hasClass('row'))
                $row = $tgt.parent().parent();

            else if ($tgt.parent().hasClass('row'))
                $row = tgt.parent();    

            else
                return false;       
        }

        //code here to select div.actions-column and hide it

    });

});
4

6 回答 6

6

你可以使用live：

$('div.row').live('mouseover', function() {
    $(this).find('div.actions-column').show();
}).live('mouseout', function() {
    $(this).find('div.actions-column').hide();
});

如文档所述：

当您绑定“实时”事件时，它将绑定到页面上所有当前和未来的元素（使用事件委托）。

还有一些注意事项：

  • 我看到您正在使用该$(window).load()事件。你可能想要$(document).ready()
  • 您应该利用 jQuery 的链接功能而不是查询$('.posts')两次，您可以在最后附加第二个调用（就像我在上面的示例中所做的那样） - 这更有效，并且是对 1 个选择器执行多项操作的首选方式在 jQuery 中。
  • 您尝试编写的用于查找div.rowHTML 树的下一个的代码已经由 jQuery 的closest()方法实现。

你可以用它做这样的事情：

$('div.posts').hover(function(e) {
    var row = $(e.target).closest('div.row');
    $row.find('div.actions-column').show();
}, function(e) {
    var row = $(e.target).closest('div.row');
    $row.find('div.actions-column').hide();
});

但这不是必需的，因为live我在上面展示了功能。

  • 考虑查询的效率。如果您只有一个<div>带有一类帖子的帖子，请考虑给它一个 id 属性。这是迄今为止在文档中选择元素的最有效方法，并且将其赋予只出现一次的元素是有意义的。
  • 每当您按类查询元素时，最好在类之前包含标签名称（当然，除非您希望它位于许多不同的标签中） - 所以不要寻找.row，养成寻找的习惯div.row反而。它只是更快。
于 2009-06-15T20:25:22.497 回答
2

我意识到这已经得到了回答，但是由于 jQuery 1.5 添加了一个显式的“委托”方法，现在这可能是一个更好的解决方案。由于此线程将出现在搜索中，因此我将此答案发布给其他搜索它的人。（我还通过使用“hover”和“toggle()”而不是 mouseenter/mouseleave + show()/hide() 来重构以进一步简洁。）

http://api.jquery.com/delegate/

$('div.row').live('mouseover', function() {
    $(this).find('div.actions-column').show();
}).live('mouseout', function() {
    $(this).find('div.actions-column').hide();
});

使用 jQuery 1.5 或更高版本可以写成：

$(".posts").delegate("div.row", "hover", function(){
    $(this).find("div.actions-column").toggle();
});

看看它的实际效果：

http://jsfiddle.net/SM6Jv/

在此处输入图像描述

于 2011-02-25T16:48:59.860 回答
1

尝试使用jQuery 的live()方法。它在内部使用事件委托来执行其操作，因此您甚至不必考虑正确设置事件委托。

$('.row').live('mouseover', function() {
    $(this).find('.actions-column').show();
}).live('mouseout', function() {
    $(this).find('.actions-column').hide();
});
于 2009-06-15T20:27:45.767 回答
0

?:

$('div.actions-column', $row).show(); // .hide()

更新：

最好使用jQuery 最接近（[expr]）：

var $tgt = $(e.target);
var $row = $tgt.closest('.row');

代替：

var $row, $tgt = $(e.target);

if ($tgt.hasClass("row")) {
    $row = $tgt;
} else { 
    if ($tgt.parent().parent().hasClass('row'))
        $row = $tgt.parent().parent();
    else if ($tgt.parent().hasClass('row'))
        $row = tgt.parent();    
    else
        return false;           
}
于 2009-06-15T20:24:05.620 回答
0

尝试：

$row.find (".actions-column").hide ();

和

$row.find (".actions-column").show();
于 2009-06-15T20:25:02.760 回答
0

除非你真的想用 jQuery 来做这件事，否则当然可以用一行 CSS 来管理：

div.row:hover div.actions-column { display:block; }
于 2009-06-29T11:09:40.100 回答