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>

如何遍历输入内容

1 个答案: