计算JQuery中选定复选框值的笛卡尔积？

Question

我有一个带有菜单项的 index.html

index.html：

<table>
   <tr>
      <td>Soups</td>
      <td><label><input type="checkbox" class = "soups" name="selected" value="chicken_sp" />chicken_sp</label></td>
      <td><label><input type="checkbox" class = "soups"  name="selected" value="clam_ch" />clam_ch</label></td>
      <td><label><input type="checkbox" class = "soups"  name="selected" value="mushroom_sp" />mushroom_sp</label></td>
   </tr>
    <tr>
   <td>Salads:</td>
   <td><label><input type="checkbox" class = "salads" name="selected" value="potato_sd" />potato_sd</label></td>
   <td><label><input type="checkbox" class = "salads"  name="selected" value="caesars_ds" />caesars_ds</label></td>
   <td><label><input type="checkbox" class = "salads"  name="selected" value="carrot_sd" />carrot_sd</label></td>
   </tr>
   <tr>
      <td>Entrees:</td>
      <td><label><input type="checkbox" class = "entrees" name="selected" value="stuffed_mushrooms" />stuffed_mushrooms</label></td>
      <td><label><input type="checkbox" class = "entrees" name="selected" value="chicken_wings" />chicken_wings</label></td>
      <td><label><input type="checkbox" name="selected" class = "entrees"  value="fried_calamari" />fried_calamari</label></td>
   </tr>
   <tr>
      <td>Main course:</td>
      <td><label><input type="checkbox" class = "main_course" name="selected" value="fish_mc" />fish_mc</label></td>
      <td><label><input type="checkbox" class = "main_course" name="selected" value="beef_mc" />beef_mc</label></td>
      <td><label><input type="checkbox" name="selected" class = "main_course"  value="chicken_mc" />chicken_mc</label></td>
   </tr>
   <tr>
      <td>Desserts:</td>
      <td><label><input type="checkbox" class = "desserts" name="selected" value="chocolate_ds" />chocolate_ds</label></td>
      <td><label><input type="checkbox" class = "desserts" name="selected" value="vanilla_ds" />vanilla_ds</label></td>
      <td><label><input type="checkbox" class = "desserts" name="selected" value="strawberry_ds" />strawberry_ds</label></td>
   </tr>
   <tr>
      <td>Fruits:</td>
      <td><label><input type="checkbox" class = "fruits" name="selected" value="apple" />apple</label></td>
      <td><label><input type="checkbox" class = "fruits" name="selected" value="orange" />orange</label></td>
      <td><label><input type="checkbox" name="selected" class = "fruits"  value="mango" />mango</label></td>
   </tr>

            </table>

<p>
<button id='display button'>Calculate combos</button>

我需要它做什么的例子 当用户选择一个菜单项（每个类别中至少一个）来创建餐点时，应用程序需要显示餐点组合。 如果用户从每个类别中选择多个项目，则应用程序需要显示所选项目的所有组合。

例如，如果用户选择了“chicken_sp”、“caesar_sd”、“chicken_wings”、“beef_mc”、“chocolate_ds”和“apple”，则应用应显示：

chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + apple

如果用户选择了以上所有选项，以及第二个甜点（“strawberry_ds”）和第二个水果（“orange”），应用程序应该显示：

   chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + apple
   chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + orange
   chicken_sp + caesar_sd + chicken_wings + beef_mc + strawberry_ds + apple
   chicken_sp + caesar_sd + chicken_wings + beef_mc + strawberry_ds + orange    

我正在尝试使用笛卡尔积来计算这个。我得到了笛卡尔的解决方案here

my_js：

var soups = [];
var salads = [];
var entrees = [];
var main_course = [];
var desserts = [];
var fruits = [];

$("#display_button").click(function(event) {
event.preventDefault();

//putting selected checkbox values into arrays
var soups = $('input:checkbox:checked.soups').map(function () {
     return this.value;
}).get();  

var salads = $('input:checkbox:checked.salads').map(function () {
     return this.value;
}).get();   

var entrees = $('input:checkbox:checked.entrees').map(function () {
     return this.value;
}).get();   

var main_course = $('input:checkbox:checked.main_course').map(function () {
     return this.value;
}).get();   

var desserts = $('input:checkbox:checked.desserts').map(function () {
     return this.value;
}).get();   

var fruits = $('input:checkbox:checked.fruits').map(function () {
     return this.value;
}).get();   

console.log(salads)
});

//cartesian function
function cartesianProductOf() {
 return _.reduce(arguments, function(a, b) {
    return _.flatten(_.map(a, function(x) {
        return _.map(b, function(y) {
            return x.concat([y]);
        });
    }), true);
   }, [ [] ]);
 };


//calculating combinations
altert(cartesianProductOf(soups, salads, entrees, main_course, desserts, fruits));

问题在于，cartesianProductOf 函数仅计算两个参数（两个数组）的乘积。如何更改它以计算 6？

Answer 1

您可以使用.not(function)过滤<input>父<tr>元素不是.checked<input>元素的父元素，.filter()<input>匹配的<tr>元素的子节点.value 不以 .checked <input> 元素的数字结尾，.concat() .checked <input> .value 到结果数组。

$(".offers").on("click", function(event) {
  console.clear();
  var not = $.map($("input.offers:checked"), function(el) {
    return el.value
  })
  .map(function(element) {
    return $("table tr")
      .not(function(i, el) {
        return $(el).find("input[value='" + element + "']").is("*")
      })
      .find("input")
      .filter(function(index, el) {
        return el.value.slice(-1) !== element.slice(-1)
      })
      .map(function(index, el) {
        return el.value
      })
      .get()
      .concat(element);
  });
  
  console.log(not);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="offers">click</button>

<table>
  <tr>
    <td><label><input type="checkbox" name="selected" value="offer1" class="offers" />offer1</label></td>
    <td><label><input type="checkbox" name="selected" value="offer2" class="offers" />offer2</label></td>
    <td><label><input type="checkbox" name="selected" value="offer3" class=".offers" />offer3</label></td>
    <td><label><input type="checkbox" name="selected" value="offer4" class="offers" />offer4</label></td>
  </tr>
  <tr>
    <td><label><input type="checkbox" name="selected" value="prop1" class="offers" />prop1</label></td>
    <td><label><input type="checkbox" name="selected" value="prop2" class="offers" />prop2</label></td>
    <td><label><input type="checkbox" name="selected" value="prop3" class="offers" />prop3</label></td>
    <td><label><input type="checkbox" name="selected" value="prop4" class="offers" />prop4</label></td>
  </tr>
</table>