Question

我无法理解并使用$（this）关键字。例如，使用http://api.jquery.com/hover/

中的悬停类示例

HTML

 <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>
    <li class='fade'>Socks</li>
</ul>

<div class='fade'>My Div<div>

JQUERY

这将在所有<li>元素上添加该功能。

$("li").hover(
    function () {
        $(this).append($("<span> ***</span>"));
    },
    function () {
        $(this).find("span:last").remove();
    }
);

如果我只想在淡入淡出类上添加函数。我能够这样做

$("li.fade").hover(
    function () {
        $(this).append($("<span> ***</span>"));
    },
    function () {
        $(this).find("span:last").remove();
    }
);

这将选择所有淡入淡出类，包括DIV

 $("li").hover(
        function () {
            $('.fade').append($("<span> ***</span>"));
        },
        function () {
            $('.fade').find("span:last").remove();
        }
    );

为什么这不起作用？

$("li").hover(
    function () {
        $(".fade", this).append($("<span> ***</span>"));
    },
    function () {
        $(".fade", this).find("span:last").remove();
    }
);

我正在学习尝试学习jQuery。谢谢！

Answer 1

调用$(".fade", this)将在fade所代表的元素内查找具有类this的元素。它与$(this).find(".fade")完全相同。

由于this是引发hover事件的元素，它是一个li元素，因为该类在该元素上而不是任何元素，所以它将找不到任何内容作为该元素的子元素的元素。

jQuery悬停函数，带关键字：'this'

1 个答案: