事件中的“this”是什么 .on('click', 'class', function () {})答案

【问题标题】：What is "this" inside the event .on('click', 'class', function () {})事件中的“this”是什么 .on('click', 'class', function () {})
【发布时间】：2015-10-29 19:53:24
【问题描述】：

我尝试访问我单击的行以添加或删除一个类，但似乎我误解了this 的值。不是应该是调用事件的 DOM（在本例中为 <li>）吗？这是我的代码：

JAVASCRIPT

$(document).on('click', '.ToDownload', function() 
        {
            if($(this).className.lastIndexOf("isSelected") != -1)
            {
                $(this).addClass("isSelected");
                $(this).css('border', '2px solid #000099')
            }
            else
            {
                $(this).removeClass("isSelected");
                $(this).css('border', 'none')
            }
        });

HTML

<li id="addedDownloadFileRow" class="fitting ToDownload">
    <a href="#">
        <div class="ui-grid-a">
            <div class="ui-block-a">test1</div>
            <div class="ui-block-b">test2</div>
        </div>
    </a>
</li>

事实上，我认为我可以使用属性className 来查找我的行是否已被选中，但似乎this 不是<li> 标记的DOM。任何信息或查看 this 真正含义的方法将不胜感激。

附： “拟合”类仅用于某些 css 目的。

【问题讨论】：

是什么让你认为里面是<li>而不是<div>？
@azium 大概是因为在对on() 的调用中使用了'.ToDownload'
console.log(this) 或 console.dir(this) 会告诉你你想要什么。
我会使用if($(this).is(".isSelected")) 来检查是否选择了元素
"this" 指的是当前元素，基本语法是：$(selector).action()

标签： javascript jquery this event-delegation

【解决方案1】：

this 是 DOM Element，$(this) 是 jQuery 对象

完整的工作代码在http://jsfiddle.net/tomi77/xgv8q9md/

【讨论】：

非常感谢！这个简短而清晰的答案正是我所需要的。

【解决方案2】：

如果您使用 Chrome（不确定这是否适用于 Firefox），您可以将 this 的值记录到控制台。

如果它是一个 jQuery 对象，可能不清楚它指的是哪个元素，但是很容易将底层元素取出。

console.log(this[0]);

这将为您提供元素本身的最小表示，如果您将鼠标悬停在它上面，您将看到该元素在网络视图本身中突出显示。

这让您确切地看到它所指的元素。如cmets中所述，您还可以使用console.dir(element)将元素的直接对象形式记录到控制台。

【讨论】：

console.dir(this[0]) on elements 为您提供有关节点对象的更多信息，这是有用的。