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>

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

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

chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + apple

如果用户选择了上述所有内容，第二个甜点（“strawberry_ds”）和第二个水果（“橙色”），应用程序应显示：

   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 1}} <input> .value到结果数组。

＆＃13;

$(".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);
})

＆＃13;

<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>

＆＃13;

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

1 个答案: