jquery addClass() 不适用于 event.target答案

【问题标题】：jquery addClass() not working with event.targetjquery addClass() 不适用于 event.target
【发布时间】：2014-04-22 05:32:17
【问题描述】：

请帮忙。

为什么 jquery addClass() 不能与 event.target 一起使用？我编写了一个代码，它应该在单击时在目标上添加类，但它不起作用，它说，e.target.addClass 不是一个函数。

http://jsfiddle.net/Lq9G4/

代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Class Test</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <style>
        .big {
            font-size: 5em;
        }
        .small {
            font-size: 1em;
        }
    </style>

</head>
<body>
    <p>This is the text</p>
    <script>
        $(function() {
            $("p").click(function(e) {  
                      $("a").removeClass("big").addClass("small");
                      $("this").addClass("big"); //This doesn't work
                      e.target.addClass("big"); //nor this one                
                    });
        });

    </script>
</body>
</html>

【问题讨论】：

标签： jquery events target addclass

【解决方案1】：

基本上 e.target 将是一个javascript 对象，您必须先将其转换为Jquery 对象，然后才能使用它的功能，例如.addClass()

试试，

$(e.target).addClass("big");

同时，$("this").addClass("big"); 此代码将不起作用，因为您将 this 作为字符串传递。 this 也是一个 javascript 对象，您也需要将其转换为像 $(this) 这样的 jquery 对象

【讨论】：

@user3540736 我在回答中对此做了一些解释.. :)

【解决方案2】：

你有两个问题：

$(this).addClass("big"); //Unquote to "this"
$(e.target).addClass("big"); // select e.target with $() wrapper.

【讨论】：

【解决方案3】：

    e.currentTarget.classList.add("loading_arrow");

您可以使用上面的行来使用 js 鼠标事件添加 loading_arrow 类。

【讨论】：

【解决方案4】：

改变这一行

$("this").addClass("big"); //This doesn't work

到

$(this).addClass("big"); //This will work work

如果您还需要 event 本身，那么您可以使用

$(e.target).addClass('big');

【讨论】：

【解决方案5】：

由于.addClass()是一个jQuery方法，你需要一个jQuery对象，所以将e.target包装在$中，将其转换为jQuery对象：

$(e.target).addClass("big");

除此之外，另一个解决方案是使用$(this)。你不需要将this 包裹在" " 中：

$(this).addClass("big");

Updated Fiddle

【讨论】：

【解决方案6】：

试试这个：

 $(e.target).addClass('big');

Demo

【讨论】：

【解决方案7】：

<script>
    $(function() {
        $("p").click(function(e) {
                  $("a").removeClass("big").addClass("small");
                  $(this).addClass("big"); //This doesn't work               
                });
    });

</script>

“这个”=>这个

【讨论】：