I would like to build a fashion size finder to help the customer find their correct size.
Example: Chest measurement of 78-81cm corresponds to an XS size.
Now I can of course build an infinite number of arrays, if and else statements but this has to be more elegant somehow?
$('.sub').click(function(){
var brust = $('#brust').val();
var brustxs = ['78','79','80','81'];
var brusts = ['82','83','84','85'];
var brustm = ['86','87','88','89'];
var brustl = ['90','91','92','93','94','95','96','97'];
var brustxl = ['98','99','100','101','102'];
if( $.inArray(brust, brustxs) !== -1 ) {
alert('found in'+' XS');
}else if ( $.inArray(brust, brusts) !== -1 ) {
alert('found in'+' S');
}else {
alert('nothing');
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input label="brustumfang" value="80" type="text" id="brust">
<input type="submit" class="sub">You can have an object with the definitions and loop through it without having to change the code that matches it.
For example :
var sizes = {
xs: [78,79,81],
s: [82,83,84,85]
}
for( var size in sizes ){
vas sizeArray = sizes[size];
if( $.inArray(brust, sizeArray ) > -1 ) {
alert('found in'+ size );
break; //important bit
}
}
or for better performance you can store the sizes ordered like :
var sizes = [
{ size: "XS", range:[78,79,80] },
{ size: "S", range:[81,82,83] }
]
or another idea would be just to store the break points of each size from to and check if the size fits in that range like :
var sizes = [
{ size: "XS", from: 78, to:80},
{ size: "S", from: 81, to:85},
];
$.each(sizes, function(index,sizeInfo){
//using jQuery each same as foreach for array
if( brust>=sizeInfo.from && brust<=sizeInfo.to ){
alert('found in'+ sizeInfo.size );
return false; //in jQuery is same as break;
}
});
Instead of keeping each value in an array, what you can do is keep an array of sizes that keeps track of the min value, max value, and label. Then you can simply loop through the sizes and find the one that matches (where the min size is <= brustSize AND max size >= brustSize), like so:
let brustSizes = [{min: 78, max: 81, label: 'xs'}, {min: 82, max: 85, label: 's'}, {min: 86, max: 89, label: 'm'}, {min: 90, max: 97, label: 'l'}, {min: 98, max: 102, label: 'xl'}];
function getSize (brustSize) {
let size = brustSizes.find(size => size.min <= brustSize && size.max >= brustSize);
return size && size.label
}
console.log(getSize(81));
console.log(getSize(0));
console.log(getSize(84));
console.log(getSize(87));
console.log(getSize(96));
console.log(getSize(98));