0

わかりました、これは少し紛らわしい質問かもしれません。私のmessages.phpページには、どのdivを表示するかを制御する以下のjavascriptがあります。各divには個別の機能があります。

すべてのメッセージを取得して表示するメッセージを20個に制限するwhileループを含むmessage-content-p1があり、2番目はmessage-content-p2であり、次のwhileループを含むそれぞれに20個のメッセージのみが表示されます。 。

このjavascriptのアイデアは、2ページ、3ページなどに表示されるメッセージがもっとあるという錯覚を作り出すことです。

これまでのところ、JavaScriptは「m_p1」または「m_p2」をクリックすると各divを表示し、現在のページをフェードアウトして次のページをフェードアウトします。これは、その機能に対しては正常に機能します。私が得る問題は、ユーザーがページをスキップして、2ページまたは4ページに移動せずに3ページまたは5ページに移動したい場合、スクリプトが機能せず、何もフェードインまたはフェードアウトしないことです。

同様に、ユーザーが5ページから1ページに戻ると、スクリプトは機能せず、5ページをフェードアウトせず、1ページをフェードインしません。

私が説明したことを行う方法はありますか？もしそうなら、誰かが私にその方法を教えてください。

ありがとうございました。

 <script>
    $(".message-content-p2").hide();
    $('.m_p2').click(function () {
        if ($('.message-content-p2').is(":hidden")) {       
      $('.message-content-p1').fadeOut(500);
      $('.message-content-p2').delay(700).fadeIn(500);


        }

      });

    </script>


    <script>
    $(".message-content-p3").hide();
    $('.m_p3').click(function () {
        if ($('.message-content-p3').is(":hidden")) {       
      $('.message-content-p2').fadeOut(500);
      $('.message-content-p3').delay(700).fadeIn(500);


        }

      });

    </script>

    <script>
    $(".message-content-p4").hide();
    $('.m_p4').click(function () {
        if ($('.message-content-p4').is(":hidden")) {       
      $('.message-content-p3').fadeOut(500);
      $('.message-content-p4').delay(700).fadeIn(500);


        }

      });

    </script>

    <script>
    $(".message-content-p5").hide();
    $('.m_p5').click(function () {
        if ($('.message-content-p5').is(":hidden")) {       
      $('.message-content-p4').fadeOut(500);
      $('.message-content-p5').delay(700).fadeIn(500);


        }

      });

    </script>

    <script>
    $(".message-content-p6").hide();
    $('.m_p6').click(function () {
        if ($('.message-content-p6').is(":hidden")) {       
      $('.message-content-p5').fadeOut(500);
      $('.message-content-p6').delay(700).fadeIn(500);


        }

      });

    </script>
4

1 に答える 1

0

これはすべて非常に手動であり、ページ数に応じてスケーラブルではありません。

各「ページ」に同じクラスを設定せず、どのコントロールをクリックしてスキップするページを決定するのか、すべてのページをフェードアウトしてから、コントロールのインデックス値に対応するページのみをフェードインするのはなぜですか。クリックされましたか？たとえば、「ページ」にメッセージを送るすべてにクラス.message-contentがあり、すべてにクラスを持つボタンのセットがあるとします.m。jQueryは単純に次のようになります。

$('.m').click(function() {
    $('.message-content').fadeOut(500);
    var index = $(this).index();
    $('.message-content').get(index).delay(700).fadeIn(500);
}
于 2012-12-28T22:40:00.187 に答える