1. 首頁
  2. 問答
  3. 如何比較兩個變量的值，這些變量的值是在JavaScript中映射其他變量的結果？

如何比較兩個變量的值，這些變量的值是在JavaScript中映射其他變量的結果？

2017-08-05 21 views
0

我想：如何比較兩個變量的值，這些變量的值是在JavaScript中映射其他變量的結果？

  1. 兩個選擇列表中獲取用戶的值，然後

  2. 與來自 對象中的前兩個項目（其中有5個項目進行比較的用戶值性質），這個目的已經從映射其它5個變量創建 ...然後如果用戶值 等於前兩項一些對象的索引的

  3. 返回從對象的i中的最後3項ndex具有第一個 兩個項目等於用戶值。

到目前爲止，我知道我已經得到了用戶值，我已經映射值來獲取數組。我只需要更正如何比較這些值並將數據返回到最後三個選擇列表。

我欣賞的任何提示：

  • 如何使我的代碼更短。
  • 如何避免寫了這麼多，如果語句

這裏是我的代碼：

的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

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

}

來源

2017-08-05 user8418146

回答

0

您可以隨時更換您的最後一組if語句與以下for循環一樣執行類似的活動兩者均在所有如果blocks-

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倍的值。

來源

2017-08-05 02:54:42

+0

經過一點編輯你的答案我想出了這個： – user8418146

0

，這解決了我今天的挑戰：

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蘭詹爲主導方向。

來源

2017-08-05 15:23:46 user8418146

相關問題

 相關問題