在javascript数组中需要帮助

时间：2015-03-10 19:30:44

标签： javascript

我正致力于基于javascript的功能，通过笑脸显示用户情绪7天。 1个笑脸1天。

我在第1天通过javascript为用户1做了这个，如果不是的话。但这不是执行此任务的好方法。因为在这里我们有7天，并且根据文本字段中的输入值，它将显示笑脸。

不知怎的，我觉得阵列将是不错的选择。但我不知道如何通过数组来完成这项任务。

我首先想到的是我必须在数组中调用7个笑脸背景，然后根据用户输入的值匹配它们。但问题出在user2和user3上。我想我必须两次为user2和user3复制user1代码。

任何人都可以建议一些好的解决方案。

My working jsfiddle code

＆＃13;
＆＃13; 
function checkvalue()
{
    var iuser1 = document.getElementById("user1").value;
    var iuser2 = document.getElementById("user2").value;
    var iuser3 = document.getElementById("user3").value;
    
    if ( iuser1 == 1 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/18_EmoticonsHDcom.png')";
    }                    
    else if ( iuser1 == 2 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/53_EmoticonsHDcom.png')";                    
    }
    else if ( iuser1 == 3 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/69_EmoticonsHDcom.png')";                    
    }
    else if ( iuser1 == 4 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/42_EmoticonsHDcom.png')";                    
    }
    else if ( iuser1 == 5 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/72_EmoticonsHDcom.png')";                    
    }
    else if ( iuser1 == 6 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/26_EmoticonsHDcom.png')";                    
    }
    else if ( iuser1 == 7 )
    {
        document.getElementById("c1day1").style.backgroundImage = "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/40_EmoticonsHDcom.png')";                    
    }
    
    
}
＆＃13; 
input[type="text"]{
    display:block;
    width:100%;
    margin-bottom:10px;
}
.icon-bg{
    width:64px;
    height:64px;
    display:block;
    background-position:center;
}
＆＃13; 
<h5> Check result by javascript code </h5>
<input type="text" name="in" id="user1" placeholder="Put value for user 1 between 1-7">
<input type="text" name="in" id="user2" placeholder="Put value for user 2 between 1-7">
<input type="text" name="in" id="user3" placeholder="Put value for user 3 between 1-7">
    
<input type="submit" id="check" value="Check" onclick="checkvalue()">
                
<hr>
                    
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
    <tr>
        <td> <strong> &nbsp; </strong> </td>
        <td> &nbsp;</td>
        <td> <strong> Day 1 </strong> </td>
        <td> <strong> Day 2 </strong> </td>
        <td> <strong> Day 3 </strong> </td>
        <td> <strong> Day 4 </strong> </td>
        <td> <strong> Day 5 </strong> </td>
        <td> <strong> Day 6 </strong> </td>
        <td> <strong> Day 7 </strong> </td>
    </tr>
                            
    <tr>
        <td> <strong> User 1 </strong> </td>
        <td>&nbsp;</td>
        <td> <div class="icon-bg" id="c1day1"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day2"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day3"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day4"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day5"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day6"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day7"> &nbsp; </div> </td>
        
    </tr>
                            
    <tr>
        <td> <strong> User 2 </strong> </td>
        <td>&nbsp;</td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/01_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/72_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/22_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/59_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/70_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/71_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/40_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        </tr>
                                                        
            <tr>
                <td> <strong> User 3 </strong> </td>
                <td>&nbsp;</td>
                <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/50_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/51_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/53_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/20_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/19_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/37_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/69_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
              </tr>
 </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

这是一个更新版本，确实使用了一个数组用于图像和一个循环来完成输入：

在那些日子里，我从一位同事那里了解到，如果你需要两次使用相同的代码，要么把它放在一个函数中，要么你可以使用一个循环。

＆＃13;
＆＃13; 
//create an array with the background images.
var imgArray =  ["url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/18_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/53_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/69_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/42_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/72_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/26_EmoticonsHDcom.png')", "url('https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/40_EmoticonsHDcom.png')"];                    


function checkvalue()
{
    var inputs = document.querySelectorAll("input[name='in']"); //select an HTML collection using document.querySelectorAll based on the element: input and the name having value "in"
  
  //loop the inputs:
  
  for (var i = 0; i < inputs.length; i++)
  {
      var value = inputs[i].value;
      if (!isNaN(value) && value > 0 && value < 8) //check if number and greater than 0, but smaller than 8
      {
         //subtract 1 from the number since JavaScript is zero based with indices.
         document.querySelectorAll(".icon-bg")[i].style.backgroundImage = imgArray[value-1];
      }
      else
      {
         //do something here to show error message
      }  
      
  
  }
    
   
    
    
}
＆＃13; 
input[type="text"]{
    display:block;
    width:100%;
    margin-bottom:10px;
}
.icon-bg{
    width:64px;
    height:64px;
    display:block;
    background-position:center;
}
＆＃13; 
<h5> Check result by javascript code </h5>
<input type="text" name="in" id="user1" placeholder="Put value for user 1 between 1-7">
<input type="text" name="in" id="user2" placeholder="Put value for user 2 between 1-7">
<input type="text" name="in" id="user3" placeholder="Put value for user 3 between 1-7">
<input type="text" name="in" id="user4" placeholder="Put value for user 3 between 1-7">
<input type="text" name="in" id="user5" placeholder="Put value for user 3 between 1-7">
<input type="text" name="in" id="user6" placeholder="Put value for user 3 between 1-7">
<input type="text" name="in" id="user7" placeholder="Put value for user 3 between 1-7">
    
<input type="submit" id="check" value="Check" onclick="checkvalue()">
                
<hr>
                    
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
    <tr>
        <td> <strong> &nbsp; </strong> </td>
        <td> &nbsp;</td>
        <td> <strong> Day 1 </strong> </td>
        <td> <strong> Day 2 </strong> </td>
        <td> <strong> Day 3 </strong> </td>
        <td> <strong> Day 4 </strong> </td>
        <td> <strong> Day 5 </strong> </td>
        <td> <strong> Day 6 </strong> </td>
        <td> <strong> Day 7 </strong> </td>
    </tr>
                            
    <tr>
        <td> <strong> User 1 </strong> </td>
        <td>&nbsp;</td>
        <td> <div class="icon-bg" id="c1day1"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day2"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day3"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day4"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day5"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day6"> &nbsp; </div> </td>
        <td> <div class="icon-bg" id="c1day7"> &nbsp; </div> </td>
        
    </tr>
                            
    <tr>
        <td> <strong> User 2 </strong> </td>
        <td>&nbsp;</td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/01_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/72_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/22_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/59_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/70_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/71_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/40_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
        </tr>
                                                        
            <tr>
                <td> <strong> User 3 </strong> </td>
                <td>&nbsp;</td>
                <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/50_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/51_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/53_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/20_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/19_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/37_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
                 <td> <img src="https://cdn2.iconfinder.com/data/icons/very-emotional-emoji/64/69_EmoticonsHDcom.png" alt="icon" width="48px" height="48px"> </td>
              </tr>
 </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

此代码使用以下方法和属性：

  • isNaN()：检查变量是否为数字。如果输入不是数字，则返回true，否则返回false。
  • document.QuerySelectorAll根据css选择器选择HTML集合。
    • 此处使用的属性选择：input[name='in']
    • 此处使用的课程选择：.icon-bg
相关问题
最新问题