jQuery addClass()无法与event.target一起使用

2021/01/29 15:31 · jquery ·  · 0评论

请帮忙。

为什么jqueryaddClass()无法使用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>

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

尝试,

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

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

您有两个问题:

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

您可以使用上述代码通过js鼠标事件来添加loading_arrow类。

更改此行

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

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

而且,如果您event本身需要它,则可以使用

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

由于.addClass()是jQuery方法,因此需要一个jQuery对象,因此可以e.target通过将其包装在jQuery对象中来进行转换$

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

除此之外,另一个解决方案是使用$(this)您不需要包装this在内" "

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

更新小提琴

尝试这个:

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

演示版

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

</script>

“ this” =>这个

本文地址:http://jquery.askforanswer.com/jquery-addclasswufayuevent-targetyiqishiyong.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!