Javascript のページで指定された配列のコンテンツを使用して一連の div を作成し、結果をフィルター処理して、結果に応じて div のスタイルをいくつか変更しようとしています。
私のコードの現在の問題は、現在行 ID を使用しているすべての div ではなく、1 つの 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 で 2 次元配列を作成するにはどうすればよいですか?
*編集
やった、助けてくれたみんなのおかげで！私がやったことは、すべての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>