1

我正在尝试使用 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

在Javascript中更改类的CSS？

如何在 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>
4

2 回答 2

2

该Id属性对于定义它的每个元素都应该有一个唯一的值。Usingdocument.getElementById只返回一个元素，第一个元素找到匹配的 id。因此元素而不是元素。

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

于 2013-07-16T20:04:32.960 回答
2

正如其他人所说，您需要使用类而不是 ID，因为 ID 必须是唯一的。然后您可以像这样设置background-color具有特定类（row在本例中）的元素：

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

这使用了您包含的 jQuery。

于 2013-07-16T20:09:03.863 回答