Javascript Jquery对话框并从数据库中提取内容

大家下午好

我正在处理一个站点的一部分，该站点将从数据库中的表中读取数据，并在JQuery对话框中单击“上一步”和“下一步”按钮按顺序显示数据。在这方面，我对Javascript或Jquery不太在行，需要一些指导

我可以获取对话框第一页的内容，但它会提取每个id body列的特定值。我希望它使用给定的id拉取一个实例，单击next并获取next，依此类推

代码如下

这是剧本

<script type="text/javascript">
    $(function () {
        var tutorialDialog = $("#dialog").dialog({
            autoOpen: false,
            height: 400,
            width: 550,
            modal: true,
            buttons: {
                "<< Prev": function () {

                },
                "Next >>": function () {

                }
            },
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "blind",
                duration: 500
            }
        });
        $("#opener").click(function () {
            $("#dialog").dialog("open");
        });
    });    
</script>

这是我的查看页面上的代码

<% IQueryable<#######.#####.######.######> tutorials =  gr.GetEntriesByStream(13); %>
<div id="dialog" title="Exerclock Site Tutorials">
    <p>This is dialog box for the tutorial data.</p>
        <%foreach (var item in tutorials)
          { %>
          <%if (item.seOrder == 0)
            {%>
              <%: item.seBody %>
          <%} %>
        <%} %>
</div>
<a id="opener">Go To Tutorial</a>

---

如果我理解正确，您希望根据“上一步”和“下一步”按钮浏览教程。相反，所发生的是整个内容一次显示在jQuery对话框中

实现这一点的方法不止一种，我认为一个简单的方法是让view page在一个div元素中生成每个教程，该元素的Id后缀是一个索引，例如，下面是它的样子

<div id="dialog" title="Exerclock Site Tutorials">
    <p>This is dialog box for the tutorial data.</p>
        <%foreach (var item in tutorials)
          { %>
          <%if (item.seOrder == 0)
            {%>
              <div id='tutorial<%:tutorials.indexOf(item) + 1 %>'>
              <%: item.seBody %>
              </div>
          <%} %>
        <%} %>
</div>

这将生成这样的HTML

<div id='tutorial1'>tutorial1Content1</div>
<div id='tutorial2'>tutorial1Content2</div>
<div id='tutorial3'>tutorial1Content3</div>

然后，您可以修改上一个和下一个函数，如下所示

"<< Prev": function () {
    $("#tutorial" + currentTutorialIndex).hide();
    currentTutorialIndex --;
    $("#tutorial" + currentTutorialIndex).show();

 },
 "Next >>": function () {
     $("#tutorial" + currentTutorialIndex).hide();
    currentTutorialIndex ++;
    $("#tutorial" + currentTutorialIndex).show();
 }

其中，currentTutorialIndex是一个全局/适当范围的变量，可从prev和next函数中访问

*请原谅语法错误，因为这是一个未经测试的代码