javascript - 如何迭代输入的内容

Question

正如你们所看到的，我有两列:名称和门票。
所以约翰有 15 张票，鲍勃有 10 张，依此类推...

目标:我想做某种“彩票”，每个人都有 X 张票。门票越多，赢得奖品的机会就越大。

我试图将两个列按其类分开，然后创建某种“主数组/对象”，如下所示:

lottery = {
   John => 15
   Bob  => 10
   Milla => 7
}

然后我会尝试随机挑选一个获胜者......只是不知道该怎么做。

在这里我得到了输入，但我不知道如何“连接”它们。

$('#sort').click(function(){

   let names = $('.names');
   let tickets = $('tickets');
   let size = Object.keys(names).length;
}

HTML 结构:

<section id="content">
      <div class="container participant">
         <div class="row">

            <div class="input-group">
               <div class="input-group-prepend">
               <span class="input-group-text">Nome & Tickets</span>
             </div>

               <input type="text" aria-label="name" class="names form-control">
               <input type="text" aria-label="tickets" class="tickets form-control">


               <div class="input-group-append">
                  <button class="addUser btn btn-outline-secondary" type="button">
                     <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
                  </button>
               </div>
            </div>

         </div>
      </div>
   </section>

Answer 1

考虑到每个用户都有多张票，以便有更多的获胜机会，因此创建一个包含其姓名的多个实例的数组更有意义，然后您可以在其中随机选择。

要构建数组，您可以使用 map() ，然后使用 fill() 在 randomly selecting 之前使用名称填充它。从它，像这样:

var arr = $('#content .container .row').map(function() {
  var $row = $(this);
  return new Array(parseInt($row.find('.tickets').val(), 10)).fill($row.find('.names').val());
}).get();

var winner = arr[Math.floor(Math.random() * arr.length)];
console.log('Winner: ', winner);
console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="content">
  <div class="container participant">
    <div class="row">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Nome &amp; Tickets</span>
        </div>
        <input type="text" aria-label="name" class="names form-control" value="John">
        <input type="text" aria-label="tickets" class="tickets form-control" value="15">
        <div class="input-group-append">
          <button class="addUser btn btn-outline-secondary" type="button">
             <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Nome &amp; Tickets</span>
        </div>
        <input type="text" aria-label="name" class="names form-control" value="Bob">
        <input type="text" aria-label="tickets" class="tickets form-control" value="10">
        <div class="input-group-append">
          <button class="addUser btn btn-outline-secondary" type="button">
             <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Nome &amp; Tickets</span>
        </div>
        <input type="text" aria-label="name" class="names form-control" value="Milla">
        <input type="text" aria-label="tickets" class="tickets form-control" value="7">
        <div class="input-group-append">
          <button class="addUser btn btn-outline-secondary" type="button">
             <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Nome &amp; Tickets</span>
        </div>
        <input type="text" aria-label="name" class="names form-control" value="Kurt">
        <input type="text" aria-label="tickets" class="tickets form-control" value="3">
        <div class="input-group-append">
          <button class="addUser btn btn-outline-secondary" type="button">
             <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add participante"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>