需要检查哪个变量的最大编号

Question

一位同事，我对WordPress主题有这种类型形式的调查问卷，我们试图找出合适的javascript逻辑来检查哪个变量具有最高数量。

<div class="content-area"> 
+ <main class="subpage-content"> 
+ <div class="medium-wrapper"> 
+ 
+  <?php 
+  while (have_posts()) : the_post(); 
+ 
+  the_content(); 
+ 
+  endwhile; // End of the loop. 
+  ?> 

这是最终用户填写的表单。

+  <form id="pool-selector"> 
+ 
+  <section id="pool-size" class="pool-question"> 
+   <div class="question"> 
+   <h3>What is the size of your yard?</h3> 
+   </div> 
+   <div class="answer-choices"> 
+   <div class="answer-choice"> 
+    <label for="small-pool">Small</label><br/> 
+    <input class="answer-select" id="small-pool" name="pool-size" type="radio" value="1"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="medium-pool">Medium</label><br/> 
+    <input class="answer-select" id="medium-pool" type="radio" name="pool-size" value="2"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="large-pool">Large</label><br/> 
+    <input class="answer-select" id="large-pool" type="radio" name="pool-size" value="3"/> 
+   </div> 
+   </div> 
+  </section> 
+ 
+  <section id="family-size" class="pool-question"> 
+   <div class="question"> 
+   <h3>How big is your family?</h3> 
+   </div> 
+   <div class="answer-choices"> 
+   <div class="answer-choice"> 
+    <label for="single-person">Single</label><br/> 
+    <input class="answer-select" id="single-person" name="family-size" type="radio" value="0"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="couple">Couple</label><br/> 
+    <input class="answer-select" id="couple" type="radio" name="family-size" value="2"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="small-family">Small Family</label><br/> 
+    <input class="answer-select" id="small-family" type="radio" name="family-size" value="0"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="large-family">Large Family</label><br/> 
+    <input class="answer-select" id="large-family" type="radio" name="family-size" value="p"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="extended-family">Extended Family</label><br/> 
+    <input class="answer-select" id="extended-family" type="radio" name="family-size" value="p"/> 
+   </div> 
+   </div> 
+  </section> 
+ 
+  <section id="pool-use" class="pool-question"> 
+   <div class="question"> 
+   <h3>How do you picture yourself using your perfect pool?</h3> 
+   <span>(Select all that apply.)</span> 
+   </div> 
+   <div class="answer-choices"> 
+   <div class="answer-choice"> 
+    <label for="swimming-laps">Swimming laps to stay in shape</label><br/> 
+    <input class="answer-select" id="swimming-laps" name="pool-use-1" type="checkbox" value="e"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="relaxing">Relaxing with a cool drink after a long day</label><br/> 
+    <input class="answer-select" id="relaxing" type="checkbox" name="pool-use-2" value="r"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="group-play">Playing water sports with family and friends</label><br/> 
+    <input class="answer-select" id="group-play" type="checkbox" name="pool-use-3" value="p"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="neighborhood-hangout">The go-to place for kids in the neighborhood</label><br/> 
+    <input class="answer-select" id="neighborhood-hangout" type="checkbox" name="pool-use-4" value="p"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="adult-social">Throwing social gatherings with an adult drink or two</label><br/> 
+    <input class="answer-select" id="adult-social" type="checkbox" name="pool-use-5" value="t"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="quick-dip">Quick dip to cool off after sunbathing</label><br/> 
+    <input class="answer-select" id="quick-dip" type="checkbox" name="pool-use-6" value="r"/> 
+   </div> 
+   <div class="answer-choice"> 
+    <label for="water-aerobics">Adding water aerobics to your workout plan</label><br/> 
+    <input class="answer-select" id="water-aerobics" type="checkbox" name="pool-use-7" value="e"/> 
+   </div> 
+   </div> 
+  </section> 
+ 
+  <div class="calculate-results clearfix"> 
+   <h3>All done? Get you pool profile!</h3> 
+   <a onclick="findProfile()" class="button button-yellow">Submit</a> 
+  </div> 
+ 
+  </form> 

这是javascript逻辑。

+  <script> 
+  function findProfile() { 
+   var poolSize = jQuery('#pool-size .answer-select:checked').val(); 
+   var familySize = jQuery('#family-size .answer-select:checked').val(); 
+ 
+   var relax = 0; 
+   var play = 0; 
+   var exercise = 0; 
+   var party = 0; 
+ 
+   jQuery('.answer-select:checked').each(function() { 
+   switch(jQuery(this).val()) { 
+    case "r": 
+    relax += 1; 
+    break; 
+    case "p": 
+    play += 1; 
+    break; 
+    case "e": 
+    exercise += 1; 
+    break; 
+    case "t": 
+    party += 1; 
+    break; 
+   } 
+   }); 
+ 

      //thinking the code should go here 
+ 
+   console.log("Pool Size:" + poolSize); 
+   console.log("Family Size:" + familySize); 
+  } 
+  </script> 
+ 
+ </div> 
+ </main> 
</div> 

Answer 1

您应该创建一个包含选项的对象，然后定义一个排序函数。

var options = { 
    relax: 0, 
    play: 0, 
    exercise: 0, 
    party: 0, 
} 

     jQuery('.answer-select:checked').each(function() { 
     switch(jQuery(this).val()) { 
      case "r": 
      options.relax += 1; 
      break; 
      case "p": 
      options.play += 1; 
      break; 
      case "e": 
      options.exercise += 1; 
      break; 
      case "t": 
      options.party += 1; 
      break; 
     } 
     }); 

var sortable = []; 
for (var opt in options) { 
    sortable.push([opt, options[opt]]); 
} 

sortable.sort(function(a, b) { 
    return a[1] - b[1]; 
}); 

然后排序将返回[["play", 2], ["party", 5], ..]