jqueryを使用してforループ内に配列を格納する方法

配列に格納された名前のリストをループし、3つの名前をランダムに選択して勝者にする完全な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

@David私は勝者に3つの名前をdivに分割したい#cover – Alfy

jQueryの要素にコンテンツを追加する方法を尋ねていますか？ '.text（）'、 '.html（）'、 '.append（）'など – David

は、単にあなたの勝利の名を取って、テキストを（使用する必要があります）を挿入します適切なdivに挿入します。 3つの勝利の名前がIDの代わりにクラスであっても、心配しないならば、より簡単になります。

受賞名もあなたが名前を残しておきたい1であると仮定される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ループ内に配列を格納する方法

答えて

関連する問題