如何比较来自两个变量的值，这些变量在JavaScript中映射其他变量后得到了它们的值？
[英]How do I compare values from two variables that got their values as result of mapping other variables in JavaScript?
问题描述
I'm trying to: 
我试图：
get the user values from two select list and then
从两个选择列表中获取用户值，然后 compare the user values with the first two items from an object(which it has 5 items with properties), this object has been created from mapping other 5 variables...and then if the user values are equal to the first two items of some object's index
将用户值与某个对象的前两项比较（该对象有5个具有属性的对象），此对象是通过映射其他5个变量创建的...然后，如果用户值等于某些对象的前两项对象的索引 return the last 3 items from the object's index that has the first two items equal to the user values.
从对象的索引中返回最后3个项目，该项目的前两个项目与用户值相等。
So far, I know I already get the user values, I already map the values to get the arrays. 到目前为止，我知道我已经获取了用户值，已经映射了值以获取数组。 I just need to correct how to compare the values and return the data to the last three select lists. 我只需要更正如何比较值并将数据返回到最后三个选择列表即可。
I appreciate any tips about: 我感谢有关以下方面的任何提示：
- how to make my code shorter. 如何使我的代码更短。
- how to avoid writing so much if statements 如何避免写太多if语句
Here's my code: 这是我的代码：
index.html 的index.html
<html>
<head>
<title>PicxHelper</title>
</head>
<body>
<!--RATIOS SECTION-->
<div id="ratiosWrapper" class="col-sm-4">
<p><strong><h2 id="rsP">Ratios</h2></strong></p>
<div id="ratios">
<p><strong>Ratios: </strong>
<select id="ratiosList">
<option value="1:1">1:1</option>
<option value="2:1">2:1</option>
<option value="3:1">3:1</option>
<option value="4:1">4:1</option>
<option value="5:1">5:1</option>
<option value="6:1">6:1</option>
<option value="7:1">7:1</option>
<option value="8:1">8:1</option>
</select>
</p>
<p><strong>Camera Aperture: </strong>
<select class="" id="lensA">
<option value="f/1">f/1</option>
<option value="f/1.1">f/1.1</option>
<option value="f/1.2">f/1.2</option>
<option value="f/1.4">f/1.4</option>
<option value="f/1.6">f/1.6</option>
<option value="f/1.8">f/1.8</option>
<option value="f/2">f/2</option>
<option value="f/2.2">f/2.2</option>
<option value="f/2.5">f/2.5</option>
<option value="f/2.8">f/2.8</option>
<option value="f/3.2">f/3.2</option>
<option value="f/3.5">f/3.5</option>
<option value="f/4">f/4</option>
<option value="f/4.5">f/4.5</option>
<option value="f/5">f/5</option>
<option value="f/5.6">f/5.6</option>
<option value="f/6.3">f/6.3</option>
<option value="f/7.1">f/7.1</option>
<option value="f/8">f/8</option>
<option value="f/9">f/9</option>
<option value="f/10">f/10</option>
<option value="f/11">f/11</option>
<option value="f/13">f/13</option>
<option value="f/14">f/14</option>
<option value="f/16">f/16</option>
<option value="f/18">f/18</option>
<option value="f/20">f/20</option>
<option value="f/22">f/22</option>
<option value="f/26">f/26</option>
<option value="f/28">f/28</option>
<option value="f/32">f/32</option>
<option value="f/36">f/36</option>
<option value="f/40">f/40</option>
<option value="f/44">f/44</option>
<option value="f/52">f/52</option>
<option value="f/56">f/56</option>
<option value="f/64">f/64</option>
</select>
</p>
<p><strong>Main Light: </strong>
<select class="" id="mainL">
<option value="f/0.32">f/0.32</option>
<option value="f/0.35">f/0.35</option>
<option value="f/0.4">f/0.4</option>
<option value="f/0.45">f/0.45</option>
<option value="f/0.5">f/0.5</option>
<option value="f/0.56">f/0.56</option>
<option value="f/0.63">f/0.63</option>
<option value="f/0.71">f/0.71</option>
<option value="f/0.79">f/0.79</option>
<option selected value="f/0.89">f/0.89</option>
<option value="f/1">f/1</option>
<option value="f/1.1">f/1.1</option>
<option value="f/1.2">f/1.2</option>
<option value="f/1.4">f/1.4</option>
<option value="f/1.6">f/1.6</option>
<option value="f/1.8">f/1.8</option>
<option value="f/2">f/2</option>
<option value="f/2.2">f/2.2</option>
<option value="f/2.5">f/2.5</option>
<option value="f/2.8">f/2.8</option>
<option value="f/3.2">f/3.2</option>
<option value="f/3.5">f/3.5</option>
<option value="f/4">f/4</option>
<option value="f/4.5">f/4.5</option>
<option value="f/5">f/5</option>
<option value="f/5.6">f/5.6</option>
<option value="f/6.3">f/6.3</option>
<option value="f/7.1">f/7.1</option>
<option value="f/8">f/8</option>
<option value="f/9">f/9</option>
<option value="f/10">f/10</option>
<option value="f/11">f/11</option>
<option value="f/13">f/13</option>
<option value="f/14">f/14</option>
<option value="f/16">f/16</option>
<option value="f/18">f/18</option>
<option value="f/20">f/20</option>
<option value="f/22">f/22</option>
<option value="f/26">f/26</option>
<option value="f/28">f/28</option>
<option value="f/32">f/32</option>
<option value="f/36">f/36</option>
<option value="f/40">f/40</option>
<option value="f/44">f/44</option>
<option value="f/52">f/52</option>
<option value="f/56">f/56</option>
<option value="f/64">f/64</option>
</select>
</p>
<p><strong>Fill Light: </strong>
<select class="" id="fillL">
<option value="f/0.32">f/0.32</option>
<option value="f/0.35">f/0.35</option>
<option value="f/0.4">f/0.4</option>
<option value="f/0.45">f/0.45</option>
<option value="f/0.5">f/0.5</option>
<option value="f/0.56">f/0.56</option>
<option value="f/0.63">f/0.63</option>
<option value="f/0.71">f/0.71</option>
<option value="f/0.79">f/0.79</option>
<option selected value="f/0.89">f/0.89</option>
<option value="f/1">f/1</option>
<option value="f/1.1">f/1.1</option>
<option value="f/1.2">f/1.2</option>
<option value="f/1.4">f/1.4</option>
<option value="f/1.6">f/1.6</option>
<option value="f/1.8">f/1.8</option>
<option value="f/2">f/2</option>
<option value="f/2.2">f/2.2</option>
<option value="f/2.5">f/2.5</option>
<option value="f/2.8">f/2.8</option>
<option value="f/3.2">f/3.2</option>
<option value="f/3.5">f/3.5</option>
<option value="f/4">f/4</option>
<option value="f/4.5">f/4.5</option>
<option value="f/5">f/5</option>
<option value="f/5.6">f/5.6</option>
<option value="f/6.3">f/6.3</option>
<option value="f/7.1">f/7.1</option>
<option value="f/8">f/8</option>
<option value="f/9">f/9</option>
<option value="f/10">f/10</option>
<option value="f/11">f/11</option>
<option value="f/13">f/13</option>
<option value="f/14">f/14</option>
<option value="f/16">f/16</option>
<option value="f/18">f/18</option>
<option value="f/20">f/20</option>
<option value="f/22">f/22</option>
<option value="f/26">f/26</option>
<option value="f/28">f/28</option>
<option value="f/32">f/32</option>
<option value="f/36">f/36</option>
<option value="f/40">f/40</option>
<option value="f/44">f/44</option>
<option value="f/52">f/52</option>
<option value="f/56">f/56</option>
<option value="f/64">f/64</option>
</select>
</p>
<p><strong>Hair Light: </strong>
<select class="" id="rimL">
<option value="f/0.32">f/0.32</option>
<option value="f/0.35">f/0.35</option>
<option value="f/0.4">f/0.4</option>
<option value="f/0.45">f/0.45</option>
<option value="f/0.5">f/0.5</option>
<option value="f/0.56">f/0.56</option>
<option value="f/0.63">f/0.63</option>
<option value="f/0.71">f/0.71</option>
<option value="f/0.79">f/0.79</option>
<option value="f/0.89">f/0.89</option>
<option value="f/1">f/1</option>
<option value="f/1.1">f/1.1</option>
<option selected value="f/1.2">f/1.2</option>
<option value="f/1.4">f/1.4</option>
<option value="f/1.6">f/1.6</option>
<option value="f/1.8">f/1.8</option>
<option value="f/2">f/2</option>
<option value="f/2.2">f/2.2</option>
<option value="f/2.5">f/2.5</option>
<option value="f/2.8">f/2.8</option>
<option value="f/3.2">f/3.2</option>
<option value="f/3.5">f/3.5</option>
<option value="f/4">f/4</option>
<option value="f/4.5">f/4.5</option>
<option value="f/5">f/5</option>
<option value="f/5.6">f/5.6</option>
<option value="f/6.3">f/6.3</option>
<option value="f/7.1">f/7.1</option>
<option value="f/8">f/8</option>
<option value="f/9">f/9</option>
<option value="f/10">f/10</option>
<option value="f/11">f/11</option>
<option value="f/13">f/13</option>
<option value="f/14">f/14</option>
<option value="f/16">f/16</option>
<option value="f/18">f/18</option>
<option value="f/20">f/20</option>
<option value="f/22">f/22</option>
<option value="f/26">f/26</option>
<option value="f/28">f/28</option>
<option value="f/32">f/32</option>
<option value="f/36">f/36</option>
<option value="f/40">f/40</option>
<option value="f/44">f/44</option>
<option value="f/52">f/52</option>
<option value="f/56">f/56</option>
<option value="f/64">f/64</option>
</select>
</p>
<button class="btn-primary btn-md" onclick="myFunction();" style="border-radius: 20px;">Get Settings</button>
</div>
</div>
</body>
<script type="text/javascript" src="ratiosCalc.js"> </script>
</html>
ratiosCalc.js ratiosCalc.js
var rAaA = function(ratio, apers){
this.ratio = ratio;
this.apers = apers;
}
var userRaaa = function(ratio, lensA, mainA, fillA, rimA){
this.ratio = ratio;
this.lensA = lensA;
this.mainA = mainA;
this.fillA = fillA;
this.rimA = rimA;
}
var ratiosArray = ["1:1", "2:1", "3:1", "4:1", "5:1", "6:1", "7:1", "8:1"];
var aperturesSettings = [
{
lensArray : ["f/1", "f/1.1", "f/1.2", "f/1.4", "f/1.6", "f/1.8", "f/2",
"f/2.2", "f/2.5", "f/2.8", "f/3.2", "f/3.5", "f/4", "f/4.5", "f/5",
"f/5.6", "f/6.3", "f/7.1", "f/8", "f/9", "f/10", "f/11", "f/13", "f/14",
"f/16", "f/18", "f/20", "f/22", "f/26", "f/28", "f/32", "f/36", "f/40",
"f/44", "f/52", "f/56", "f/64"]
//End of "Lens Apertures Available on a Variable/Array".
},
{
mainLightArray : ["f/0.32", "f/0.35", "f/0.4", "f/0.45", "f/0.5", "f/0.56",
"f/0.63", "f/0.71", "f/0.79", "f/0.89", "f/1", "f/1.1", "f/1.2", "f/1.4",
"f/1.6", "f/1.8", "f/2", "f/2.2", "f/2.5", "f/2.8", "f/3.2", "f/3.5", "f/4",
"f/4.5", "f/5", "f/5.6", "f/6.3", "f/7.1", "f/8", "f/9", "f/10", "f/11",
"f/13", "f/14", "f/16", "f/18", "f/20", "f/22", "f/26", "f/28", "f/32",
"f/36", "f/40", "f/44", "f/52", "f/56", "f/64"]
},
{
fillLightArray : ["f/0.32", "f/0.35", "f/0.4", "f/0.45", "f/0.5", "f/0.56",
"f/0.63", "f/0.71", "f/0.79", "f/0.89", "f/1", "f/1.1", "f/1.2", "f/1.4",
"f/1.6", "f/1.8", "f/2", "f/2.2", "f/2.5", "f/2.8", "f/3.2", "f/3.5", "f/4",
"f/4.5", "f/5", "f/5.6", "f/6.3", "f/7.1", "f/8", "f/9", "f/10", "f/11",
"f/13", "f/14", "f/16", "f/18", "f/20", "f/22", "f/26", "f/28", "f/32",
"f/36", "f/40", "f/44", "f/52", "f/56", "f/64"]
},
{
rimLightArray : ["f/0.32", "f/0.35", "f/0.4", "f/0.45", "f/0.5", "f/0.56",
"f/0.63", "f/0.71", "f/0.79", "f/0.89", "f/1", "f/1.1", "f/1.2", "f/1.4",
"f/1.6", "f/1.8", "f/2", "f/2.2", "f/2.5", "f/2.8", "f/3.2", "f/3.5", "f/4",
"f/4.5", "f/5", "f/5.6", "f/6.3", "f/7.1", "f/8", "f/9", "f/10", "f/11",
"f/13", "f/14", "f/16", "f/18", "f/20", "f/22", "f/26", "f/28", "f/32",
"f/36", "f/40", "f/44", "f/52", "f/56", "f/64", "f/72", "f/80", "f/88"]
}
];
var userSettings = [
// Mapping Ratio 1:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[0], value);
}),
// Mapping Ratio 2:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[1], value);
}),
// Mapping Ratio 3:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[2], value);
}),
// Mapping Ratio 4:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[3], value);
}),
// Mapping Ratio 5:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[4], value);
}),
// Mapping Ratio 6:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[5], value);
}),
// Mapping Ratio 7:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[6], value);
}),
// Mapping Ratio 8:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new rAaA(ratiosArray[7], value);
})
];
var userCompleteSettings = [
// MApping Ratio 1:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[0], value, aperturesSettings[1].mainLightArray[arr.length+index-28], aperturesSettings[2].fillLightArray[arr.length+index-28], aperturesSettings[3].rimLightArray[arr.length+index-24]);
}),
// Mapping Ratio 2:1 "One stop of difference"
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[1], value, aperturesSettings[1].mainLightArray[arr.length+index-28], aperturesSettings[2].fillLightArray[arr.length+index-31], aperturesSettings[3].rimLightArray[arr.length+index-24]);
}),
// Mapping Ratio 3:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[2], value);
}),
// Mapping Ratio 4:1 "Two stop of difference"
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[3], value, aperturesSettings[1].mainLightArray[arr.length+index-28], aperturesSettings[2].fillLightArray[arr.length+index-34], aperturesSettings[3].rimLightArray[arr.length+index-24]);
}),
// Mapping Ratio 5:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[4], value);
}),
// Mapping Ratio 6:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[5], value);
}),
// Mapping Ratio 7:1
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[6], value);
}),
// Mapping Ratio 8:1 "Three stop of difference"
aperturesSettings[0].lensArray.map(function(value, index, arr){
return new userRaaa(ratiosArray[7], value, aperturesSettings[1].mainLightArray[arr.length+index-28], aperturesSettings[2].fillLightArray[arr.length+index-37], aperturesSettings[3].rimLightArray[arr.length+index-24]);
})
];
//Main Function Triggered when user choose a Seeting
function myFunction(){
return myFunct();
} //End of Main Function.
function myFunct(){
var userRatio = document.getElementById("ratiosList").value;
var userLensAper = document.getElementById("lensA").value; //End of Getting UserSettings
var userRL = [userRatio, userLensAper];
if(userRL == [userSettings[0][0].ratio, userSettings[0][0].apers]){
return document.getElementById("mainL").selectedIndex = 10,
document.getElementById("fillL").selectedIndex = 10,
document.getElementById("rimL").selectedIndex = 12;
}else if (userRL == [userSettings[0][1].ratio, userSettings[0][1].apers]) {
return document.getElementById("mainL").selectedIndex = 11,
document.getElementById("fillL").selectedIndex = 11,
document.getElementById("rimL").selectedIndex = 13;
}else if (userRL == [userSettings[0][2].ratio, userSettings[0][2].apers]) {
return document.getElementById("mainL").selectedIndex = 12,
document.getElementById("fillL").selectedIndex = 12,
document.getElementById("rimL").selectedIndex = 14;
}else if (userRL == [userSettings[0][3].ratio, userSettings[0][3].apers]) {
return document.getElementById("mainL").selectedIndex = 13,
document.getElementById("fillL").selectedIndex = 13,
document.getElementById("rimL").selectedIndex = 15;
}
}
2 个解决方案
解决方案1
0 已采纳 2017-08-05 02:54:42
You can always replace your last set of if statements with the following for loop as you perform similar activity in all the if blocks- 当您在所有if块中执行类似的活动时，始终可以使用以下for循环替换最后一组if语句，
var i = 0;
for( i = 0,; i < 4; i++ ){
if(userRL[0] == userSettings[i][i].ratio && userRL[1] == userSettings[i][i].apers]){
return document.getElementById("mainL").selectedIndex = i+10,
document.getElementById("fillL").selectedIndex = i+10,
document.getElementById("rimL").selectedIndex = i+12;
}
}
You need to be comparing the 2 values separately using an && operator. 您需要使用&&运算符分别比较这两个值。
解决方案2
0 2017-08-05 15:23:46
and this solved my todays challenge: 这解决了我今天的挑战：
for( i = 0; i < 7; i++ ){ for( a = 0; a < 37; a++ ){ if(userRL[0] == userSettings[0][2].ratio && userRL[1] == userSettings[0][a].apers){ return document.getElementById("mainL").selectedIndex = a+9, document.getElementById("fillL").selectedIndex = a+9, document.getElementById("rimL").selectedIndex = a+12; }else if (userRL[0] == userSettings[1][2].ratio && userRL[1] == userSettings[1][a].apers) { return document.getElementById("mainL").selectedIndex = a+9, document.getElementById("fillL").selectedIndex = a+6, document.getElementById("rimL").selectedIndex = a+12; }else if (userRL[0] == userSettings[3][2].ratio && userRL[1] == userSettings[3][a].apers) { return document.getElementById("mainL").selectedIndex = a+9, document.getElementById("fillL").selectedIndex = a+3, document.getElementById("rimL").selectedIndex = a+12; }else if (userRL[0] == userSettings[7][2].ratio && userRL[1] == userSettings[7][a].apers) { return document.getElementById("mainL").selectedIndex = a+9, document.getElementById("fillL").selectedIndex = a+0, document.getElementById("rimL").selectedIndex = a+12; } } }
thanks to @Rajeev Ranjan for the Orientation. 感谢@Rajeev Ranjan的指导。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
给定变量到值的映射，如何调用javascript函数？ - How do I call a javascript function given a mapping of variables to values?
JavaScript：如何从函数返回两个值并在另一个函数中调用这两个变量？ - JavaScript: How do I return two values from a function and call those two variables in another function?
如何从html表单中的值读入javascript变量 - How do i read values from an html form into variables for javascript
如何在JavaScript中比较变量并过滤空白值 - How to compare variables with filtering blank values in JavaScript
如何在 JavaScript 中比较两个包含字符串的变量？ - How do I compare two variables containing strings in JavaScript?
您如何比较Javascript中的两个变量？ - How do you compare two variables in Javascript?
如何保存变量中的值？ - How do I save values from variables?
如何比较JavaScript中的两个变量 - How to compare two variables in javascript
Javascript如何比较两个值，然后更改背景颜色？ - Javascript How do i compare two values and then change background color?
如何将 ODATA 结果中的信息检索到 JavaScript 变量中？ - How do I retrieve information from an ODATA result into JavaScript variables?
相关标签