使用javascript为消息创建单独的页面

using javascript to create separate pages for messages?

本文关键字：单独 创建 javascript 消息 使用      更新时间：2023-09-26

好吧，这可能是一个有点令人困惑的问题。我有下面的javascript在我的消息。php页面控制哪个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>

这看起来非常手工，而且对于任何数量的页面来说都不是很可扩展。

为什么不为每个"页面"设置相同的类，并且在单击任何控件确定要跳转到哪些页面时，只是淡出所有页面，然后仅淡出与所单击的控件的索引值相对应的页面?例如，假设您所有的消息"页面"都具有.message-content类，并且假设您有一组按钮都具有.m类。您的jQuery可以简单地看起来像这样:

$('.m').click(function() {
    $('.message-content').fadeOut(500);
    var index = $(this).index();
    $('.message-content').get(index).delay(700).fadeIn(500);
}
相关文章：