2016-08-10 42 views
-1

我试图编写一个表单,它可以从一组标记中的范围(0,9)中生成一个非重复的随机数集。我写了我的JavaScript,但我仍然没有得到正确的东西。为每个生成非重复数字(值)<a>标记

(function($) { 
 
    $(window).load(function() { 
 
     function shuffle(array) { 
 
      var i = array.length, 
 
       j = 0, 
 
       temp; 
 

 
      while (i--) { 
 
       j = Math.floor(Math.random() * (i+1)); 
 
       temp = array[i]; 
 
       array[i] = array[j]; 
 
       array[j] = temp; 
 
      } 
 
      return array; 
 
     } 
 

 
     var ranNum = shuffle([0,1,2,3,4,5,6,7,8,9]); 
 
     $('.test').each(function(){ 
 

 
      $(this).html(ranNum); 
 
     }); 
 
    }) 
 
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="jumbotron"> 
 
    <div class="form-group"> 
 
     <div class="btn-group"> 
 
      <a href="#" class="btn btn-default test" id="1st">1</a> 
 
      <a href="#" class="btn btn-default test" id="2nd">2</a> 
 
      <a href="#" class="btn btn-default test" id="3rd">3</a> 
 
      <a href="#" class="btn btn-default test" id="4th">4</a> 
 
      <a href="#" class="btn btn-default test" id="5th">5</a> 
 
      <a href="#" class="btn btn-clear">Back</a> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <div class="btn-group"> 
 
      <a href="#" class="btn btn-default" id="6th">1</a> 
 
      <a href="#" class="btn btn-default" id="7th">2</a> 
 
      <a href="#" class="btn btn-default" id="8th">3</a> 
 
      <a href="#" class="btn btn-default" id="9th">4</a> 
 
      <a href="#" class="btn btn-default" id="10th">5</a> 
 
      <a href="#" class="btn btn-clear">Clear</a> 
 
     </div> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="exampleInputEmail1" class="text-success"> 
 
      <h5 class="text-success">PayCom PIN</h5> 
 
     </label> 
 
     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="PIN Number Here"> 
 
    </div> 
 

 
    <div class="form-group"> 
 
     <a href="#" class="btn btn-clear">Previous</a> 
 
     <a href="#" class="btn btn-success">Buy Airtime</a> 
 
    </div> 
 
</div>

什么,我得到的是每一个浏览器刷新后的阵列重新安排,但包含整个阵列,在每个按钮是非不奇异值的一个href按钮重复。

请问我该如何解决?

回答

1

您必须添加index

$('.test').each(function (index, element) { 
    $(element).html(ranNum[index]); 
}); 

ranNum是你的阵列,必须循环每个HTML元素每个数组元素

请阅读文档:https://api.jquery.com/each/

+0

感谢。正是我需要的。也感谢文档的推荐。 –

+0

@gbade_在你无法做某事时总是阅读文档;)请选择一个答案作为其他用户的解决方案 – ventaquil

1

一个更清洁的方式做到这一点可能是有你的号码的排列像一个“池”,并在每次“接受”了一些时间,它从池中删除。要从池中删除号码,请使用array.splice()

var arrayOfAvailableNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
 

 
function getNumberAtRandom() { 
 
    var pos = Math.floor(Math.random() * arrayOfAvailableNumbers.length); 
 
    var item = arrayOfAvailableNumbers.splice(pos, 1); 
 
    return item[0]; 
 
} 
 

 
$('.item').each(function() { 
 
    $(this).html(getNumberAtRandom()); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div>