1
자바 스크립트의 페이지에 지정된 배열에서 div 세트를 만든 다음 결과를 필터링하고 결과에 따라 div 스타일을 약간 변경하려고합니다.Div 스타일을 자바 스크립트로 변경하십시오.
내 코드의 현재 문제는 현재 행 ID를 사용하는 모든 div가 아닌 한 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?
* 편집
나는 것보다, 그것을했다 도와 준 모든 사람들에게 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>
jQuery의 오래된 버전도 함께 배우고 있습니다 ... – crush
'id '값은 항상 한 페이지 내에서 고유해야합니다. –
항상 한 곳에 스크립트 유지 –