Calcul des valeurs de case à cocher du produit cartésien pour les cases à cocher sélectionnées dans JQuery?

Question

J'ai un index.html avec des éléments de menu

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>

Exemples de ce que je besoin de faire L'application doit montrer la combinaison de repas, lorsque l'utilisateur sélectionne un élément de menu (au moins un de chaque catégorie) pour créer un repas. Si l'utilisateur sélectionne plus d'un élément de chaque catégorie, l'application doit afficher tous les combos pour les éléments sélectionnés.

Par exemple, si l'utilisateur a sélectionné "chicken_sp", "caesar_sd", "chicken_wings", "beef_mc", "chocolate_ds" et "pomme", l'application doit montrer:

chicken_sp + caesar_sd + chicken_wings + beef_mc + chocolate_ds + apple 

Si l'utilisateur sélectionne tous les ci-dessus, et le second dessert (« strawberry_ds ») et le second fruit (« orange »), l'application doit montrer:

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  

Je suis en train d'utiliser le produit cartésien pour calculer cela. Je suis la solution pour le cartésienne 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)); 

Le problème est que la fonction cartesianProductOf calcule le produit que pour deux arguments (deux tableaux). Comment puis-je le changer pour calculer pour 6?

Answer 1

Vous pouvez utiliser .not(function) pour filtrer <input> éléments parents <tr> qui ne sont pas le parent de l'élément .checked<input>, .filter() les nœuds enfants <input> de appariés <tr> éléments où le .value ne se termine pas par le chiffre de l'élément .checked<input>, .concat() le .checked<input>.value au tableau résultant.

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