如何比较两个变量的值，这两个变量的值是在JavaScript中映射其他变量的结果？

时间：2017-08-05 02:43:05

标签： javascript html dom

我正在努力：

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

  2. 将用户值与a中的前两项进行比较 对象（它有5个具有属性的项），这个对象已经存在 通过映射其他5个变量创建...然后如果用户值 等于某个对象索引的前两项

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

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

    我很感激有关的提示：

    • 如何缩短我的代码。
    • 如何避免写下这么多陈述

    这是我的代码：

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

}

2 个答案:

答案 0 :(得分：0)

当您在所有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;

     }
    }

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

答案 1 :(得分：0)

这解决了我今天的挑战：

＆＃13;
＆＃13; 
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;
               }
         }
    }
＆＃13;
＆＃13;
＆＃13;

感谢@Rajeev Ranjan的迎新活动。

相关问题
最新问题