0

クラス「ページ」を持つ3つのdivがあります。各 div には、div に関するいくつかの情報を示す "info" div があります。

私が達成したかったのは、「ページ」divの下のテキストをクリックすると、フェードアウトし、「情報」がフェードインすることです。

jQuery についてほとんど何も知らなくても、なんとかこれを機能させることができました。私のHTMLは：

    <div id="content">

       <div class="page"><p class="click">Click me to open</p></div>
       <div class="info"><div class="closebut"></div></div>

       <div class="page"><p class="click">Click me to open</p></div>
       <div class="info"><div class="closebut"></div></div>

       <div class="page"><p class="click">Click me to open</p></div>
       <div class="info"><div class="closebut"></div></div>

    </div>

私のjQueryは次のとおりです。

    $(document).ready(function(){
    $(".info").hide();

    $("p.click").click(function(){ 
        $(".page").fadeOut("slow", function(){ $(".info").fadeIn(); });
    });

    $(".closebut").click(function(){
        $(".info").fadeOut("slow", function(){ $(".page").fadeIn(); });
    });
});

そのため、ドキュメントが読み込まれると、jQuery は ".info" div を非表示にします。段落「.click」をクリックすると、「.page」がフェードアウトし、最後に「.info」がフェードインします。次に、閉じるボタン (.closebut) として機能する X の小さなイメージがあります。

すべてがうまく機能します。ただし、最初の「p.click」をクリックすると、すべての「.page」がフェードアウトし、すべての「.info」がフェードインします。

5 つ以上の ".page" + ".info" が必要になるため、一度に 1 つの div をフェードアウト/フェードインする最も簡単な方法は何ですか?

つまり、html でさらにクラスを作成したり、jQuery コードを拡張したりせずに.. よろしくお願いします。

4

3 に答える 3

2

各「div のグループ」を別の div に入れます。

<div class="parent">
       <div class="page"></div>
       <div class="info"><div class="closebut"></div></div>
       <div id="text"><p class="click">Click me to open</p></div>
</div>

jQuery:

$("p.click").click(function(){ 
    $(this).parent().find(".page").fadeOut("slow", function(){ $(this).parent().find(".info").fadeIn(); });
});

それが私の考えです。

于 2013-02-20T00:13:34.880 に答える
1

とともに、jQuerynext()と関数を使用できます。prev()parent()

$("p.click").click(function(){ 
    var p = $(this);
    p.parent().prev().prev(".page").fadeOut("slow", function(){ p.parent().prev(".info").fadeIn(); });
});

$(".closebut").click(function(){
    var but = $(this);
    but.parent(".info").fadeOut("slow", function(){ but.parent().prev(".page").fadeIn(); });
});

これが機能するのは、イベント ハンドラー内で、thisクリックされた要素を参照するためです。

于 2013-02-20T00:13:21.147 に答える