小贝子编程

如何比较两个变量的值，这两个变量的值是通过在 JavaScript 中映射其他变量而获得其值的?



我正在尝试：

  1. 从两个选择列表中获取用户值，然后

  2. 将用户值与 对象(它有 5 个带属性的项目(，这个对象是 通过映射其他 5 个变量创建...然后如果用户值 等于某个对象索引的前两项

  3. 从具有第一个的对象索引中返回最后 3 个项目 两个项目等于用户值。

到目前为止，我知道我已经获得了用户值，我已经映射了值以获取数组。我只需要更正如何比较值并将数据返回到最后三个选择列表。

我感谢有关以下方面的任何提示：

  • 如何使我的代码更短。
  • 如何避免写这么多IF语句

这是我的代码：

索引.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>

比率计算.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;
} 
}

当您在所有 if 块中执行类似的活动时，您始终可以将最后一组 if 语句替换为以下 for 循环-

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

您需要使用&&运算符分别比较 2 个值。

这解决了我今天的挑战：

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

感谢@Rajeev Ranjan的迎新活动。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium