html div标签位置的随机序列答案

【问题标题】：Random sequence of html div tags positionhtml div标签位置的随机序列
【发布时间】：2014-02-01 10:22:48
【问题描述】：

此 GridView 中有四个 Div 标签，ID="NUMBER1" ID="NUMBER2" ID="NUMBER3" ID="NUMBER4" 值，我想在 gridview 的每一行中随机更改它们在页面中的位置顺序。执行此操作的最佳和最简单的服务器端方法是什么。我是使用 C# 语言的 asp.net 新手。

<body>
    <asp:GridView OnRowCommand="SelectedPollGridView_RowCommand" ID="SelectedPollGridView" runat="server" AutoGenerateColumns="False" DataKeyNames="QuesID" DataSourceID="SelectedPollSqlDataSource">
        <Columns>
            <asp:TemplateField HeaderText="Questions">
                <ItemTemplate>
                    <div runat="server" id="MainDiv" class="text-right col-md-12">
                        <div class="row ">
                            <div dir="rtl" class="col-md-12 text-right">
                                <p runat="server" id="BodyPTag"><%#Eval("Body") %></p>
                                <asp:Label Visible="false" ID="QuesIDLabel" runat="server" Text='<%#Eval("QuesID") %>'></asp:Label>
                            </div>
                        </div>
                        <div id="NUMBER1" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div2" class="text-right col-md-11">
                                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("O1") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div3" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O1" CssClass='<%#Eval("O1Css") %>' ID="O1Button" runat="server" Text="Option 1" />
                                </div>
                            </div>
                        </div>
                        <div id="NUMBER2" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div4" class="text-right col-md-11">
                                    <asp:Label ID="Label2" runat="server" Text='<%#Eval("O2") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div5" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O2" CssClass='<%#Eval("O2Css") %>' ID="O2Button" runat="server" Text="Option 2" />
                                </div>
                            </div>
                        </div>
                        <div id="NUMBER3" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div6" class="text-right col-md-11">
                                    <asp:Label ID="Label3" runat="server" Text='<%#Eval("O3") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div7" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O3" CssClass='<%#Eval("O3Css") %>' ID="O3Button" runat="server" Text="Option 3" />
                                </div>
                            </div>
                        </div>
                        <div  id="NUMBER4" runat="server" class="row ">
                            <div class="col-md-12">
                                <div dir="rtl" runat="server" id="Div8" class="text-right col-md-11">
                                    <asp:Label ID="Label4" runat="server" Text='<%#Eval("O4") %>'></asp:Label>
                                </div>
                                <div runat="server" id="Div9" class="text-right col-md-1">
                                    <asp:Button CommandArgument='<%# ((GridViewRow) Container).RowIndex %>' CommandName="O4" CssClass='<%#Eval("O4Css") %>' ID="O4Button" runat="server" Text="Option 4" />
                                </div>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:SqlDataSource ID="SelectedPollSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:GUOTSConnectionString %>" SelectCommand="SELECT DISTINCT QuesID, Body, O1, O2, O4, O3, O1Css, O2Css, O4Css, O3Css, Time, BookRange, UserID, CourseID, Code FROM Question WHERE (UserID = @userid) AND (Code = @code)">
        <SelectParameters>
            <asp:QueryStringParameter Name="code" QueryStringField="code" />
            <asp:SessionParameter Name="userid" SessionField="userid" />
        </SelectParameters>
    </asp:SqlDataSource>
</body>

【问题讨论】：

随机随机？当您刷新时，它们会切换它们在页面上的位置吗？还是您的意思是“任意”，因为它们具有不变的特定顺序，但与代码中的顺序不同？
事实上这是一个在线考试，我想为每个用户随机显示每个问题的选项顺序，这样他们就无法告诉对方正确选项的数量:)。跨度>

标签： c# jquery asp.net gridview random

【解决方案1】：

以下将做你想做的事。

Working FIDDLE here

首先，更改您当前的 div，为每一行指定一个我们可以在脚本中选择的类名，例如“randomDiv”。我们本可以使用“行”，但我担心您在更多地方使用它，而不仅仅是这些 div。

<div id="NUMBER1" runat="server" class="row randomDiv">

然后在准备好的文档上运行以下javascript：

<script>
    $(document).ready(function() {

        var divs= $(".randomDiv");
        for(var i = 0; i < divs.length; i++){
            var target = Math.floor(Math.random() * divs.length -1) + 1;
            var target2 = Math.floor(Math.random() * divs.length -1) +1;
            divs.eq(target).before(divs.eq(target2));
        }

    });
</script>

【讨论】：

有服务器端方法吗？因为如果用户在他们的浏览器中关闭 java 脚本，它就不会发生。这很关键，必须以任何方式发生。非常感谢。
人们还这样做吗？在他们的浏览器中关闭javascript？这似乎是 1997 年。
事实上这是一个在线考试，我想为每个用户随机显示每个问题的选项序列，这样他们就无法告诉对方正确选项的数量。
因为您使用的是gridview，我认为您失去了一些控制权。 Repeater 可能让您有机会在每个循环中编写更多代码，但是自从我搞砸了我不会引用我的话已经很久了。您必须编写自己的 c# 随机化逻辑并将其放入中继器中，因为它会吐出 div
脚本在小提琴中工作正常，我不知道你在本地实现了什么。 jsfiddle.net/b4k65/1