Question

Good Afternoon All，

我正在开发一个站点的一部分，该站点将从数据库中的表中读取数据，并在JQuery对话框中单击上一个和下一个按钮，依次显示数据。对于这个问题，我对Javascript或Jquery真的不太好，需要一点指导。

我可以在对话框的第一页上获取内容，但它会为每个id body列提取特定值。我希望它使用给定的id拉出一个实例，单击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>

enter image description here

Answer 1

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

有多种方法可以做到这一点，我认为一个简单的方法是让视图页面在div元素中生成每个教程，其中Id带有索引后缀，例如，这里＆＃ 39;它看起来像什么

<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函数中访问。

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

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

1 个答案: