-1

PHPファイルで使用されているこのHTML行（ホバーポップアップをアクティブにする）コードを次のjqueryコードに接続する方法を理解しようとしています。1つのホバーインスタンスで機能するようになりましたが、ページ全体に複数のホバーを配置する予定です。

HTMLコード：

<a class="que" href="http://www.google.com">okok</a> 
<div class="launch">test</div>

jQueryコード：

$(document).ready(function() {
    $("div.launch").css({'display':'block','opacity':'0'})
    $("a.que").hover(
        function () {
            $(this).next('.launch').animate({
                opacity: 1
            }, 500);
        },
        function () {
            $(this).sibling('div').stop().animate({
                opacity: 0
            }, 200);
        }
    )
});

助けてくれてありがとう...:)

4

2 に答える 2

1

ホバー効果を持たせたいすべての要素に一致するようにjQueryセレクターを変更するだけです。jQuery セレクターは、どの項目を選択するかを指示する jQuery ステートメントの一部です。

$(selectorGoesHere).takeSomeAction;

セレクターは、CSS で使用するのと同じ形式に一致するため、たとえば、 の要素class="someClass"は jQuery で を使用して選択され$(".someClass")ます。jQuery セレクターは複数の一致する項目を同時に参照できるため、先ほど使用した jQuery ステートメントは、そのクラスを持つすべての要素を選択し、選択したアクションを実行します。

たとえば、jQuery を使用して everydivの背景色を赤に設定する場合は、次のようにします。

$("div").css("background-color","#FF0000");

分解すると、そのステートメントはdiv(セレクターで指定された) すべての要素を検索し、ドキュメント内のbackground-color: #FF0000EVERYdivに CSS スタイルを適用します。

http://jsfiddle.net/joycse06/hzm5p/1/は、コードを使用して複数のホバー オーバー効果を持つ例です。既に作成された jQuery ステートメントが複数の HTML 要素にどのように適用されるかのサンプルについては、そのリンクをたどってください。

編集:以下のコードに基づいて、jQuery をhttp://jsfiddle.net/hzm5p/5/に一致するように変更します。

jQuery(document).ready(function() {
    jQuery("div.launch").css({'display':'block','opacity':'0'})

    jQuery("a.que").hover(
        function () {
            jQuery(this).parent().next('.launch').animate({
                opacity: 1
            }, 500);
        },
        function () {
            jQuery(this).parent().next('.launch').stop().animate({
                opacity: 0
            }, 200);
        }
    )
});​

単純に追加.parent()して含まれているp要素を取得し、次にその.next('.launch')要素を取得します。

編集 2:functions.php Wordpress の jQuery の場合、次の行をファイルのどこかに含める必要があります。

wp_enqueue_script("jquery");

また、Wordpress で使用されている jQuery は「互換モード」用に設計されているようです。つまり、$ ショートカットはデフォルトでは使用できません。http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/jQueryに記載されている回避策を使用しない限り、$ の代わりに使用する必要があります。

編集 3:次のコードで jQuery の読み込みをテストします。

if (jQuery) {  
    alert("jQuery loaded"); 
} else {
    alert("jQuery not loaded");
}

それがロードされている場合、私はあなたに何を言うべきかわかりません。そうでない場合は、Wordpress で原因を突き止めてロードするか、jQuery 以外のスクリプトを使用するようにコードを書き直す必要があります。

于 2012-05-19T15:32:33.970 に答える
0

queclassをすべての<a>タグに使用し、 classをそのタグの隣にあるすべての slaunchに使用できます。div<a>

于 2012-05-19T15:34:19.943 に答える