4

私はこれに1時間苦労していて、それを解決することはできません。私はthisJavaScriptで使用するのは初めてですが、これは本当に単純で、機能していません。

これがHTMLです

<ul class="nav pull-right nav-tabs" id="primarynav">
    <li class=" navlink">
        <a href="#">About</a>
    </li>
    <li class="navlink active">
        <a href="#">Portfolio</a>
    </li>
    <li class="navlink">
        <a href="#">Contact</a>
    </li>
</ul>

そして、js

$(document).ready(function(){
    $(".navlink").click(function(){
        $(".navlink").removeClass("active");
        this.addClass("active");
    });
});

したがって、 classを持つすべての要素からclassを削除してから、クリックした要素にclassを追加する必要があります。しかし、そうではありません。activenavlinkactive

http://jsfiddle.net/Tckf7/

4

5 に答える 5

10

次のように変更します。

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

jsFiddle の例

.addClass()thisは jQuery メソッドであり、jQuery 以外のオブジェクト ( vs )に適用しようとしていました$(this)。

于 2013-03-14T19:14:16.083 に答える
2

thisjQueryがイベントをアタッチしたDOMElementを参照します。それをjQueryコレクションに変換し、のようなjQueryメソッドを使用できるようにするaddClassには、引数として$：に渡します。

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

関数内では、thisキーワードは実際には関数のコンテキストを参照します。イベントハンドラーの場合、コンテキストはハンドラーがアタッチされているDOMElementです。

于 2013-03-14T19:15:22.590 に答える
2

addClass()は jQuery メソッドですがthis、DOM オブジェクトへの直接参照にすぎません。thisjQuery メソッドを使用する前に、まず jQuery オブジェクトにラップする必要があり

$(document).ready(function(){
    $(".navlink").click(function(){
        $(".navlink").removeClass("active");
        $(this).addClass("active");
    });
});

デモ-$(this).addClass()の代わりにthis.addClass()

編集

これについて少し詳しく説明します。addClass()jQuery メソッドのように、JavaScript オブジェクトでjQuery のメソッドを呼び出すことはできませんaddClass()。

純粋な JavaScript で同じことを行うには、 だけを使用したい場合は、次のようにelement.classNamethisを使用できます。

$(document).ready(function(){
    $(".navlink").click(function(){       
        $(".navlink").removeClass("active");

        //$(this).addClass("active");
        this.className += " active";
    });
});

デモ- 使用this.className例

ただし、すでに jQuery を使用している場合は、代わりに使用しないのはほとんど意味がありません$(this).addClass()。

于 2013-03-14T19:14:51.543 に答える
1

$（this）を使用する必要があります

$(document).ready(function(){
    $(".navlink").click(function(){
        $(".navlink").removeClass("active");
        $(this).addClass("active");
    });
});

http://jsfiddle.net/Tckf7/2/

于 2013-03-14T19:15:16.690 に答える
1

thisは jQuery オブジェクトではありません$(this)。代わりに使用してください。

于 2013-03-14T19:14:35.093 に答える