使用Javascript更改Div的样式

我正尝试使用Javascript中的页面上指定的数组创建一组div，然后过滤结果并根据结果更改一些div的样式。使用Javascript更改Div的样式

我的代码目前的问题是，它似乎只改变一个div而不是所有当前使用的行ID。

任何帮助表示赞赏，也许关于如何更好地做零件的建议。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>test</title> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript">  </script> 
<style type="text/css"> 
    #testId 
    { 
     border: 1px solid red; 
     width: 300px; 
    } 
    #row 
    { 
     border: 1px solid black; 
     width: 200px; 
    } 
    .odd 
    { 
     border: 1px solid black; 
     width: 200px; 
     background-color: #CCC; 
    } 
    .row2 
    { 
     color: red; 
    }   
</style> 
<script type="text/javascript"> 
var people = [{"name": "Dave" , "age" : 35}, {"name": "Sally" , "age" : 13}, {"name": "Barry" , "age" : 50}, {"name": "Harry" , "age" : 40}, {"name": "Catherine" , "age" : 24}]; 
function ages() 
    { 
     var j = 0; 
     for (item in people) 
     { 
      if (people[j]["age"] > 30) 
      { 
      var elem = document.getElementById("row"); 
      elem.style.backgroundColor = "gray"; 
      } 
      j=j+1;   
     } 
    } 
    $(function() { 
     $('#btnRun').bind('click', function (event) { 
      $('#testId').html('Here are the results....');   
     }); 
    }); 
    </script> 
</head> 
<body> 
<div> 
    <div id="testId"> 
    Please click "Run" to show the people:</div> 
    <input id="btnRun" type="button" value="Run..." onclick="ages()"/> 
    <div id="listContainer"> 
    <script> 
    var c = 0;  
     for (var i=0;i<people.length;i++) 
     { 

      if (c == 1) 
       { 
       c = 0; 
       document.write("<div id='row'>"); 
       document.write(people[i]["name"] + " " + people[i]["age"]); 
       document.write("</div>"); 
       } 
      else 
       { 
       c = 1; 
       document.write("<div id='row' class='odd'>"); 
       document.write(people[i]["name"] + " " + people[i]["age"]); 
       document.write("</div>"); 
       } 
     }  
    </script> 
    </div> 
</div>

研究： http://www.w3schools.com/js/default.asp

Change CSS of class in Javascript?

How can I create a two dimensional array in JavaScript?

*编辑

我做到了，比ks给所有帮助过的人！我最终做的是将所有的ID改为类，并删除了通过getElementById进行搜索的需求。

生病发布我的代码在模糊的希望它可能有助于未来的人。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>test</title> 
     <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> 
     <style type="text/css"> 
      #testId 
      { 
       border: 1px solid red; 
       width: 300px; 
      } 
      .row 
      { 
       border: 1px solid black; 
       width: 200px; 
      } 
      .odd 
      { 
       border: 1px solid black; 
       width: 200px; 
       background-color: #CCC; 
      } 
      .red 
      { 
       border: 1px solid red; 
       width: 200px; 
       color: red; 
      }   
     </style> 
     <script type="text/javascript"> 
     var people = [{"name": "Dave" , "age" : 35}, {"name": "Sally" , "age" : 13}, {"name": "Barry" , "age" : 50}, {"name": "Harry" , "age" : 40}, {"name": "Catherine" , "age" : 24}]; 
     function ages() 
     { 

      var html = "";  
       for (var j=0;j<people.length;j++) 
       { 
        if (people[j]["age"] > 30) 
        { 
        var string = people[j]['name'] + ' ' + people[j]['age'];     
        var html = html + "<div class='red'>" + string + "</div>"; 
        } 
        else 
        { 
        var string = people[j]['name'] + ' ' + people[j]['age'];     
        var html = html + "<div class='row'>" + string + "</div>";  
        } 
       } 
       document.getElementById("listContainer").innerHTML=html; 




     } 
      $(function() { 
       $('#btnRun').bind('click', function (event) { 
        $('#testId').html('Here are the results....');    
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div> 
      <div id="testId"> 
      Please click "Run" to show the people:</div> 
      <input id="btnRun" type="button" value="Run..." onclick="ages()"/> 
      <div id="listContainer"> 
      <script> 
      var c = 0; 
      var html = "";  
       for (var i=0;i<people.length;i++) 
       { 

        var string = people[i]['name'] + ' ' + people[i]['age']; 

        if (c == 1) 
         { 
         c = 0; 
         var html = html + "<div class='row'>" + string + "</div>"; 

         } 
        else 
         { 
         c = 1; 
         var html = html + "<div class='row, odd'>" + string + "</div>"; 
         } 
       } 
       document.getElementById("listContainer").innerHTML=html; 
      </script> 
      </div> 
     </div> 
    </body> 
    </html>

来源

2013-07-16 MCooke

这样一个老版本的jQuery也要学习太... – crush

'id'值在单个页面中应该始终是唯一的。 –

总是让你的脚本在一个地方 – 2013-07-16 20:03:56

Id属性应该为每个元素定义一个唯一的值。使用document.getElementById仅返回一个元素，第一个元素与匹配的id一起查找。因此元素而不是元素。

在这种情况下，您应该使用一个类作为标志或使用name属性来查找匹配的元素。

来源

2013-07-16 20:04:32 Justin

感谢您指出了这一点！在我阅读你的答案后完成了。 – MCooke

正如其他人已经声明，您需要使用类而不是Ids，因为ID必须是唯一的。然后就可以设置元件的background-color具有一定类（row在本例中）是这样的：

$(".row").css("background-color", "grey");

这使用其中已包含的jQuery。

来源

2013-07-16 20:09:03 jlars62

感谢萌芽！尽管我最终没有采用这种方式，但它仍然让我睁开眼睛。 – MCooke

@MCooke没问题，很高兴帮助。 :)即使你接受了其他答案，如果我的答案是有帮助的，我将不胜感激，如果你投票。谢谢！ – jlars62

没问题，只是有足够的代表实际投票，所以采取我的第一！ – MCooke

使用Javascript更改Div的样式

回答

相关问题