3 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
.bold {
    font-weight: bold;
}

.blue {
    color: blue;
}
</style>

<a href="javascript:void(0);" onclick="ToggleClass();">Toggle class</a>

<script type="text/javascript">
function ToggleClass()
{        
    if($(this).hasClass("bold"))
    {
        $(this).removeClass("bold");
    }
    else
    {
        $(this).addClass("bold");
    }
}
</script>

質問：

1 つの関数を作成しました:ToggleClassが機能しません。何が問題なのですか?

4

6 に答える 6

1

実装の使用は、ユーティリティ メソッドjQueryを使用するのと同じくらい簡単です。.toggleClass()

<a href="#" id="toggleme">Toggle class</a>
<script type="text/javascript">
jQuery(function($)
{
    $('#toggleme').click(function()
    {
        $(this).toggleClass('bold');
    });
});
</script>
于 2013-07-08T06:59:46.883 に答える
1

インラインonclickハンドラを使用しています。あなたの HTML:

onclick="ToggleClass();"

次のように解釈されます。

element.onclick = function(event) {
    //`this` is available inside the onclick method
    ToggleClass(); //but it is not passed to called functions automatically
}

関数を呼び出しているだけなので、この実行this内で参照は設定されません。ToggleClass「設定されていない」とは、ES の側面を意味します。未定義の関数コードを入力thisすると、参照がオブジェクトthisを指すか、厳密モードの場合になります。windowundefined

this関数実行コンテキストの参照を設定する 1 つの方法は、 Function.callorを使用することFunction.applyです。

onclick="ToggleClass.call(this, event);"

thisキーワードの詳細については、こちらをご覧ください。

*eventコードでは必要ありませんが、イベント ハンドラーは通常、イベント オブジェクトを受け取ることを想定しているため、とにかく渡します。

ただし、あなたはすでに jQuery を使用しています。jQuery は、thisイベント ハンドラー内で参照を設定し、イベント オブジェクトをラップして、そのメソッドをクロスブラウザーにします。したがって、要素に JS フックを追加し、jQuery を介してリスナーをアタッチするだけです。

<a href="#" class="js-toggleClass">Toggle class</a>
<script>
$('.js-toggleClass').click(function(e) {
    e.preventDefault();
    $(this).toggleClass('bold');
});
</script>

デモ

JavaScript は属性内に属さないためhref="javascript:void(0)"、jQuery Event オブジェクトのメソッドに置き換え、jQueryメソッドを使用してロジックも簡素化しました。preventDefault()href.toggleClass()

この利点は、構造 (HTML) と動作 (JS) が分離されているため、コードがより整理され、モジュール化された状態に保たれることです。

于 2013-07-08T07:21:32.820 に答える
-2

関数 ToggleClass() を呼び出していますが、ToggleClass() 関数を呼び出すときに yoy がパラメーターを渡していません。

于 2013-07-08T07:00:16.793 に答える
-2

toggleClass()次のような関数で現在のオブジェクトを送信します。

ToggleClass(this)

クラスを切り替え

<script type="text/javascript">
function ToggleClass(abc)
{        
        if($(abc).hasClass("bold"))
                $(abc).removeClass("bold");
        else
                $(abc).addClass("bold");
}
</script>

それがあなたを助けることを願っています

于 2013-07-08T06:56:58.697 に答える