一位同事和我在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>
答案 0 :(得分：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];
});
然后sortable将返回[["play", 2], ["party", 5], ..]