Question

如何为用户选择随机5问题和显示？

其他问题应隐藏在页面中并仅显示5个问题。

我的示例代码，我希望当用户加载页面在很多问题中看到5个问题时。

<form>
    <table>
        <tbody>
            <tr id="Tr0">
                <td>Question 1: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr1">
                <td>Question 2: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr2">
                <td>Question 3: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr3">
                <td>Question 4: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr4">
                <td>Question 5: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr5">
                <td>Question 6: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr6">
                <td>Question 7: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr7">
                <td>Question 8: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr8">
                <td>Question 9: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr9">
                <td>Question 10: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
        </tbody>
    </table>
</form>

Answer 1

使用 Math.random() 生成随机数，并将其用于显示问题

＆＃13;

$('table tr').hide();
for (var i = 0; i < 5; i++) {
  $('table tr').filter(':hidden')
               .eq(Math.floor(Math.random() * (10 - i)))
               .show();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <table>
    <tbody>
      <tr id="Tr0">
        <td>Question 1:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr1">
        <td>Question 2:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr2">
        <td>Question 3:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr3">
        <td>Question 4:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr4">
        <td>Question 5:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr5">
        <td>Question 6:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr6">
        <td>Question 7:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr7">
        <td>Question 8:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr8">
        <td>Question 9:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr9">
        <td>Question 10:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
    </tbody>
  </table>
</form>

＆＃13;

hide() 用于初始隐藏所有tr
filter(':hidden') 用于过滤隐藏元素，这样可避免多次选择相同的tr
eq() 用于从隐藏的表格行中选择tr
Math.floor(Math.random() * (10 - i)) 用于生成随机数
show() 用于显示所选问题

Answer 2

//hide all trs
$("tr").hide();

//determine the number of questions
var trLength = $("tr").length;

//create an array with this number in
var numberArray = [];
for (i=0; i<trLength; i++) { 
  numberArray.push(i);
}

//shuffle the array
function shuffle(o){
  for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  return o;
};

numberArray = shuffle(numberArray);

//use first 5 from shuffled array
for (i=0; i<5; i++) { 
  $("tr").eq(numberArray[i]).show();
}

请注意，此方法可确保显示5个问题。使用随机数生成器的其他方法可能会选择相同的随机数两次，因此尝试两次显示相同的问题，导致实际显示少于5个。

Answer 3

保存所有这些，然后获得一个随机的，代码在：

var x = $('form tr')
function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
min = 0;
max = x.length;
var random_number = getRandomInt(0, x.length);
//you can get the random element by
x[random_number]

希望这有帮助

Answer 4

使用javascript随机生成器生成0到10之间的数字（例如x）。
之后使用jquery来隐藏id =＆＃34; TrX＆＃34;
存储已生成的号码。
循环直到我们得到5个不同的号码。

随机生成器代码：

Math.floor((Math.random() * 10)

Answer 5

这样的事情：

var tr=$("table tr").get().sort(function(){ 
  return Math.round(Math.random())-0.5;
}).slice(0,4);
$(tr).show();

说明：

1）获取数组中的所有TR元素。

2）然后随机排序。

3）选择n个元素

4）显示它们

<强> Working Demo

<强> Taken From Answer Posted BY Nick Craver

Answer 6

试试这个：

    <html>
    <head>
        <style type="text/css">
        tr {
            display: none;
        }
        </style>
        <script type="text/javascript">
        function selFive(){
            var idc=new Array(0,1,2,3,4,5,6,7,8,9);
            for (var i = 0; i <5; i++) {
                sel=Math.random()*idc.length;
                left=idc.slice(0,sel);
                right=idc.slice(sel+1,idc.length);
                idc=left.concat(right);
            };
            for (var i = idc.length - 1; i >= 0; i--) {
                document.getElementById('Tr'+idc[i]).style.display='table-row';
            };
        }
        </script>
    </head>
    <body onload="selFive()">
        <form>
            <table>
                <tbody>
                    <tr id="Tr0">
                        <td>Question 1: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr1">
                        <td>Question 2: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr2">
                        <td>Question 3: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr3">
                        <td>Question 4: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr4">
                        <td>Question 5: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr5">
                        <td>Question 6: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr6">
                        <td>Question 7: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr7">
                        <td>Question 8: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr8">
                        <td>Question 9: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr9">
                        <td>Question 10: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>

Answer 7

看看下面的代码示例：

<强> HTML：

<table id="tableQuestions">
    <tbody>
        <tr id="tr1"><td>Question 1</td></tr>
        <tr id="tr2"><td>Question 2</td></tr>
        <tr id="tr3"><td>Question 3</td></tr>
        <tr id="tr4"><td>Question 4</td></tr>
        <tr id="tr5"><td>Question 5</td></tr>
        <tr id="tr6"><td>Question 6</td></tr>
        <tr id="tr7"><td>Question 7</td></tr>
        <tr id="tr8"><td>Question 8</td></tr>
    </tbody>
</table>

<强> JQuery的

var generatedNumber;


$(document).ready(function() {
    $('#tableQuestions tr').each(function () {
        $(this).css('display','none');
    });

    generatedNumber = new Array();

    for (var i = 1; i <= 5; i++) {
        var n = getRandomArbitrary();
        alert('#tr' + parseInt(n).toString());
        $('#tr' + parseInt(n).toString()).css('display', '');
    }
});

function getRandomArbitrary() {
    var min = 1;
    var max = 8;
    var num = parseInt(Math.random() * (max - min) + min);
    if (generatedNumber.indexOf(num) > 0) {
        getRandomArbitrary(min, max);
    }

    return num ;
}

Answer 8

尝试此操作：使用Math.random获取随机行数并使用索引隐藏。

$(function(){
    $('input[value="Shuffle"]').click(function(){
        $('table tr').show();

       var count = 0;
       var array = [];
       while(count<5)
       { var index = parseInt(Math.random(100)*10);

           if(array.indexOf(index)<0)
           {
               array.push(index);
               $('table tr:eq('+index+')').hide();
               count++;
           }        

       }
    });
});

<强> JSfiddle Demo

如何为用户选择随机5 TR并显示？

8 个答案: