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

在这个GridView中有四个div标签，ID="NUMBER1"ID="NUMBER2"ID="NUMBER3"ID="NUMBER4"值，我想在gridview的每一行中随机更改它们在页面中的位置顺序。什么是最好，最简单的SERVER SIDE方法来做到这一点。我是新来的使用C＃语言的asp.net。html div div标签位置的随机序列

<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>

来源

2014-01-13 Mahdi Hesari

随机随机的？就像他们在刷新时切换页面上的位置一样？或者你的意思是'任意'，因为他们有一个特定的顺序不会改变，但它不像代码中的顺序？ –

实际上这是一个在线考试，我想为每个用户的每个问题随机显示选项序列，以便他们不能告诉对方的正确选项的数量:)。 –

以下将做你想要的。

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>

来源

2014-01-13 16:03:05 erikrunia

有没有服务器端的方法？因为如果用户在浏览器中关闭Java脚本，它不会发生。这是至关重要的，必须以任何方式发生。非常感谢你。 –

人们仍然这样做吗？在浏览器中关闭javascript？这似乎是如此1997. – erikrunia

实际上这是一个在线考试，我想为每个用户的每个问题随机显示选项序列，因此他们不能告诉对方的正确选项的数量。 –

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

回答

相关问题