web-dev-qa-db-ja.com

jquery addClass（）がevent.targetで機能しない

助けてください。

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>
jqueryeventstargetaddclass
19
qtgye

基本的にe.targetはjavascriptオブジェクトになります。.addClass()のような関数を使用する前に、それをJqueryオブジェクトに変換する必要があります

試して、

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

同時に、thisを文字列として渡すため、$("this").addClass("big");このコードは機能しません。 thisもjavascriptオブジェクトです。$(this)のようなjqueryオブジェクトとしても変換する必要があります

35
Rajaprabhu Aravindasamy

two問題があります：

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

この行を変更

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

に

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

さらに、event自体で必要な場合は、

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

.addClass()はjQueryメソッドなので、jQueryオブジェクトが必要です。_e.target_を_$_内にラップして、jQueryオブジェクトに変換します。

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

それ以外に、他の解決策は$(this)を使用することです。 _" "_内にthisをラップする必要はありません。

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

pdated Fiddle

2
Felix

これを試して：

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

デモ

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

</script>

「これ」=>これ

1
时间只会一直走
    e.currentTarget.classList.add("loading_arrow");

上記の行を使用して、jsマウスイベントを使用してloading_arrowクラスを追加できます。

0
Zeeshan Muhammad