Question

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

我的代码的当前问题是它似乎只更改了一个div而不是当前使用行id的所有div。

任何帮助都表示赞赏，也许是关于我如何做得更好的建议。

<!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?

*编辑

我做到了，感谢所有帮助过的人！我最终做的是将所有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>

Answer 1

Id属性对于定义的每个元素应具有唯一值。使用document.getElementById仅返回单个元素，第一个使用匹配的id查找。因此元素而不是元素。

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

Answer 2

正如其他人所说，你需要使用类而不是ID，因为id必须是唯一的。然后，您可以设置background-color元素与某个类（在此示例中为row），如下所示：

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

这使用了你所包含的jQuery。

用Javascript改变Div的风格

2 个答案: