0

好的，这可能是一个令人困惑的问题。我的messages.php 页面中有以下javascript，它控制将显示哪个div。每个 div 都有一个单独的功能。

message-content-p1 包含一个 while 循环，它获取所有消息并将其限制为 20 条要显示的消息，第二个是 message-content-p2 等等，每个都包含下一个 while 循环，每个循环只显示 20 条消息.

这个 javascript 的想法是创造一种错觉，即在第 2 页、第 3 页等上显示更多消息。

到目前为止，javascript 在单击“m_p1”或“m_p2”时显示每个 div，并淡出当前页面并淡入下一页。这适用于该功能。我遇到的问题是，如果用户想要跳过页面并转到第 3 页或第 5 页而不转到第 2 页或第 4 页，那么脚本将不起作用，并且没有任何东西淡入或淡出。

同样，如果用户从第 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 回答