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

我有一个完整的j query，它循环存储在数组中的名称列表，并随机选择三个名称作为赢家。我想如果选择名称，存储在数组中，然后推到div。如何使用jquery将数组存储在for循环中

JS藏着掖着假控制台：真通天：假 - > JS - >

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"); 


    }; 

});

<html> 
<head> 
<title>Draw</title> 

<link rel="stylesheet" href="style.css" /> 
<script type="text/javascript" src="jquery-3.1.1.min.js"></script> 
</head> 

<body> 

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

</body> 
</html>

来源

2017-02-09 Alfy

你尝试过什么？在JavaScript中创建一个数组并向其中添加一个元素是大量文档记录的概念，其中包含许多在线示例。什么不起作用？ – David

@大卫我想推三个赢家冠军div #cover – Alfy

所以你问如何添加内容到jQuery元素？ '.text（）'，'.html（）'，'.append（）'等。 – David

只需把你的优胜名字，并使用文本（）来插入进入适当的分区。如果三个获胜的名字是类而不是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 />

来源

2017-02-09 01:28:23 Sam0

非常感谢您的帮助 – Alfy

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

回答

相关问题