如何遍歷輸入內容

Question

大家可以看到，我有兩列： Name和Tickets 。
約翰有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()用名稱填充它，然后從中隨機選擇 ，如下所示：

 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>