1

投稿ごとに 2 つのサムネイルを保存するプラグインを使用しています。投稿のサムネイルごとに 2 つの div を作成し、ループ内で css 表示プロパティを「none」に設定して 2 つ目の div を非表示にしました。

 <div class='first'><?php the_post_thumbnail()?></div>
 <div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>

各投稿にカーソルを合わせると Java スクリプトを使用して、2 番目の div を表示し、最初の div を非表示にしたいのですが、作成したコードによって、サムネイルにカーソルを合わせるとすべての表示プロパティが変更されます。

カーソルが置かれている投稿を特定し、その投稿のみのサムネイル表示プロパティを変更するにはどうすればよいですか?

function() {
                       console.info('in');
                       $('.first').css('display','none');
                       $('.second').css('display','block');

                    },
                    function() {

                        $('.second').css('display','none');
                        $('.first').css('display','block');

                        //$(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
                });
4

1 に答える 1

2

JavaScript および JQuerythisキーワードは、探しているものです。

thisキーワードは何ですか？this関数を呼び出したオブジェクトを指します。最初は混乱するように聞こえますが、いくつかの簡単な例を見ると、混乱が明確になります。たとえば、あなたの場合、何divがホバーされているかを知る必要があります。あなたが今やっていることは、オブジェクトごとに個別のイベントを作成することであり、場合によっては機能しますが、明らかに複数の問題が発生します。

最初はあなたの質問です。どちらがホバーされているかをどのように判断できますか? しかし、別の問題が発生する可能性があります。divsすべてが同じイベントを必要とする50のイベントがあるとしたら? 50 行の CSS 表示変更を記述するのは、時間とスペースの両方を消費します。この 50 行を 1 行に減らす方法があるとしたら?

$('div').mouseenter(function() {

    $(this).css('property','value');

});

それで、何をしthisますか？HTML マークアップが次のようになっているとします。

<div></div>
<div></div>
<div></div>
<div></div>

そして、ホバーされている任意の に CSS プロパティを適用したいとしますdiv。上記の JQuery は次のように述べています。

「マウスがdivに入ると、その特定のdivのCSSを変更します」

つまり、this現在ホバーされている div を変更します。

明らかに、このアイデア (しゃれを意図したもの) は、JavaScript プログラミングを大幅に短縮するためにさまざまな方法で使用できます。のドキュメントを詳しく調べたい場合はthis、優れた情報源がたくさんあります。ここにいくつかあります：

http://www.quirksmode.org/js/this.html

http://learn.jquery.com/javascript-101/this-keyword/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

理解するのに少し時間がかかりましたが、一度理解すれば私の JS プログラミングは間違いなく改善されました。注意することも重要です: $(this)JQuery でのみ機能し、JavaScript では単にthis. もちろん、単純なバージョンのthisを JQuery でも使用できます。

最後に、キーワードの実際の実装を確認するための簡単なデモを作成しました。this

この回答がお役に立てば幸いです ; )

于 2013-09-19T05:26:54.437 に答える