Question

我正在尝试使用委托在鼠标悬停时显示隐藏的字符。

这是示例代码。警报工作正常。但隐藏的a没有显示出来。

<html>
<body>
<script type="text/javascript" src="jquery.js"></script>

     <script type='text/javascript'>
     $(document).ready(function(){
        $("a.del").hide();
        this.showHidden = function(event){
        if (event.type == 'mouseover') {
            alert("X");
        $(this).closest(".del").show();
        }
        };
        $("#holder").delegate("div.inner", "hover", this.showHidden);
     });
    </script>
    <div id='holder'>
        <div class='inner' style="background-color:red">a
            <a class='del'>X</a></div>
        <div class='inner' style="background-color:red">a
            <a class='del'>X</a></div>
        <div class='inner' style="background-color:red">a
            <a class='del'>X</a></div>
        <div class='inner' style="background-color:red">a
            <a class='del'>X</a></div>
    </div>
</body>
</html>

任何建议，

谢谢！

Answer 1

在定义函数时，不需要像在this.showHidden = function(event){中那样添加它。在您的代码中，您可以直接将该函数作为匿名函数添加到委托中，或者在外部定义它并将其引用。函数内的$(this)指的是触发委托的对象，在这种情况下是div.inner鼠标hovered。然后我们尝试find使用类.del在div中的所有元素并显示它们。您也可以使用children等其他功能。

以下是jsbin

中的工作代码

$("a.del").hide();
        $("#holder").delegate("div.inner", "hover", function(event){
          if (event.type == 'mouseover') {
            alert("X");
            $(this).find(".del").show();
          }
        });

Answer 2

请勿使用.closest()。在树上找到匹配。您应该使用$('.del',this)或$(this).children('.del')来查找div中的锚点。

.children() Help

Answer 3

我认为不是使用最接近的，你可以缩小它并使用如下所示的孩子。

http://jsfiddle.net/47Vjy/

但我不太确定你为什么要尝试使用委托？根据我的理解，如果你有ajax代码覆盖你的HTML，你需要刷新javascript事件吗？

Answer 4

将showHidden定义为函数的位正在创建一个可能不是您想要的全局。这样做的原因是使用call()函数调用回调，并将this设置为文档。我想你想要的是一个本地的var showHidden。然后，这是可用的，因为在设置委托方法时创建了闭包。 $(this)内部showHidden的正文将正确设置为匹配的元素，因为委托使用apply函数并设置this。所有这一切，你的回调是如此之短，我只是在委托作为匿名函数的调用中内联它。

另外，这完全没有用，因为你可以做你想做的事with CSS!

div#holder a.del { 
    display:none; 
}
div#holder:hover a.del {
    display:inline;
}

一些旧的浏览器不支持此功能，但这是理想的方式，因此您根本不需要使用JS。

如何在jquery委托函数中使用“this”关键字？

4 个答案: