如何使用jquery在for循环中存储数组

时间:2017-02-09 00:09:12

标签: jquery html

我有一个完整的obj.file循环存储在数组中的名称列表,并随机选择三个名称作为赢家。我想要如果选择名称,存储在数组中,然后推送到div。

js hide:false console:true babel:false - > js - >
j query
var members = [
    { 'Member_ID': 0, 'Member_Name': "Malon Namak" },
    { 'Member_ID': 1, 'Member_Name': "Tom Joseph" },
    { 'Member_ID': 2, 'Member_Name': "Noah Iaruel" },
    { 'Member_ID': 3, 'Member_Name': "Rodricco Simil" },
    { 'Member_ID': 4, 'Member_Name': "Nax Kev" },
    { 'Member_ID': 6, 'Member_Name': "Raphaela Seru" },

];

var $display = $("#display");
var $draw = $("#draw");
var count = 1;
var $random = $("#random");
var $head = $("#head");
var $slider_1 = ("#slider_1");
var $slider_2 = ("#slider_2");
var $slider_3 = ("#slider_3");
var els =[];
$('#random').click(function(){
    $('#random').attr("value", + (count++) + "/3" );

    var total = members.length,
        selected = Math.floor( Math.random() * total ),
        i = 0;

    console.log( "selected", selected );
    for (i=0; i<total; i++) {

        console.log( "for", i );
                setTimeout((function(i){
            return function(){

                console.log( "timeout", i );
                $display.text( members[i].Member_Name.toUpperCase() );
                if( i === selected ) {
                    $head.text("Winning!!");
                    $head.animate( {"font-size": "20px"}, "slow");
                    $display.animate( {"font-size": "40px"}, "slow");


                }
            };
        }(i)), i*250);





        if( i === selected ) {


        break;
        }
    }

    if (count == 4){
        $('#random').attr("disabled", true);
        $('#random').attr("value", "0");

        $draw.text("You have reach the limit");


    };

});

1 个答案:

答案 0 :(得分:0)

只需要获取您的获奖名称并使用text()插入相应的div。如果三个获胜的名字是课程而不是id,那会更容易,但不要担心。

获奖名称也会被推送到els数组中,该数组被假定为您要保留名称的数组。

在评论中使用您的代码制作代码片段。

var members = [{
    'Member_ID': 0,
    'Member_Name': "Malon Namak"
  }, {
    'Member_ID': 1,
    'Member_Name': "Tom Joseph"
  }, {
    'Member_ID': 2,
    'Member_Name': "Noah Iaruel"
  }, {
    'Member_ID': 3,
    'Member_Name': "Rodricco Simil"
  }, {
    'Member_ID': 4,
    'Member_Name': "Nax Kev"
  }, {
    'Member_ID': 6,
    'Member_Name': "Raphaela Seru"
  },

];

var $display = $("#display");
var $draw = $("#draw");
var count = 1;
var $random = $("#random");
var $head = $("#head");
var $slider_1 = ("#slider_1");
var $slider_2 = ("#slider_2");
var $slider_3 = ("#slider_3");
var els = [];
var inc = 1; // winning div counter
$('#random').click(function() {
  $('#random').attr("value", +(count++) + "/3");

  var total = members.length,
    selected = Math.floor(Math.random() * total),
    i = 0;

  console.log("selected", selected);
  for (i = 0; i < total; i++) {

    console.log("for", i);
    setTimeout((function(i) {
      return function() {

        console.log("timeout", i);
        $display.text(members[i].Member_Name.toUpperCase());
        if (i === selected) {
          $head.text("Winning!!");
          $head.animate({
            "font-size": "20px"
          }, "slow");
          $display.animate({
            "font-size": "40px"
          }, "slow");
          var wins = $display.text(); // get the winners name
          $('#slider_' + inc).find('.content').text(wins); // insert into suitable div
          els.push(wins);
          inc++; // move onto the next div
        }
      };
    }(i)), i * 250);

    if (i === selected) {
      break;
    }
  }

  if (count > 3) {
    $('#random').attr("disabled", true);
    $('#random').attr("value", "0");

    $draw.text("You have reach the limit");


  };

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<div id="head">
</div>
<div id="display" name="display">
</div>
<input type="button" id="random" value="Draw" />
<div id="total" name="total">
</div>
<br />
<div id="draw">
</div>
<div id="cover">
  <div id="slider_1">
    <p class="content"></p>
  </div>
  <div id="slider_2">
    <p class="content"></p>
  </div>
  <div id="slider_3">
    <p class="content"></p>
  </div>
</div>
<script type="text/javascript" src="java.js"></script>
<br />
<br />