1

jQuery APIについて詳しく知るためにすぐにjsFiddleを実行していましたが、フィドルが期待どおりに機能していません。

jsFiddle： http: //jsfiddle.net/7j5Fc/

HTML：

<div></div>

CSS：

div {
background:red;
height:100px;
width:150px;
}

JS：

$('div').click(
    function(){
        $(this).toggle(function(){
            $(this).style.background="blue";
        }
        //function(){
        //this.style.background = "orange";
        //}
        );
    }
);

不思議なことに、クリックするとdivが消え、コメント行のコメントを外すとスケッチがまったく機能しなくなります。提案や情報をいただければ幸いです。

4

2 に答える 2

7

メソッドでをラップする必要はありません。次を使用するだけtoggle()です。click()

$('div').toggle(
    function(){
        $(this).css('background-color', 'blue');
    },
    function(){
        $(this).css('background-color', 'red');
    });​

JSフィドルデモ。

また、jQueryとJavaScriptを混在させています。

jQuery$(this)オブジェクトにはstyleメソッドがありません。css()メソッドを使用する必要があります。2つのアプローチは互換性がないため、css()上記のアプローチを使用するか、プレーンJavaScriptを使用することができます。

this.style.backgroundColor = 'blue';

たとえば、jQueryからプレーンJavaScriptに切り替えます。

$(this)[0].style.backgroundColor = 'blue';

または：

$(this).get(0).style.backgroundColor = 'blue';

これらのアプローチはどちらも、基本的にjQueryオブジェクトからプレーンなDOMノード/オブジェクトを取得します。これによりネイティブJavaScriptメソッドを使用できますが、これらのノード/オブジェクトでjQueryメソッドを使用できないことを意味します。 ）（もちろん、それらをjQueryオブジェクトで再ラップしない限り）。

もちろん、jQueryを使用してイベントの委任を処理するだけの場合は、このclick()メソッドを3値と組み合わせて使用​​できます。

$('div').click(function(){
    this.style.backgroundColor = this.style.backgroundColor == 'blue' ? 'red' : 'blue';
});

JSフィドルデモ。

参照：

于 2012-12-25T19:09:47.087 に答える
1

間違ったトグルを使用しました。2つtoggleのがあります：

イベントを切り替えます

と

トグル効果

コードでは、要素を表示/非表示にするだけのトグル効果が実行されました。そのため、クリックすると消えます。

于 2012-12-25T19:18:13.083 に答える