- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
我想要的效果是，点击添加按钮给指定的UL里添加LI。并按条件给其赋值；
现在遇到的问题是：点击插入按钮时，插入的第一个LI没有按条件给class赋值；求大神帮助；谢谢哈。
以下是我的代码
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.va11{
width: 300px;
height: 45px;
background-color: #004488;
color: #FFFFFF;
line-height: 45px;
padding-left: 10px;
margin-bottom: 0px;
}
.va12{
width: 300px;
height: 45px;
background-color:#001133;
color: #FFFFFF;
line-height: 45px;
padding-left: 10px;
margin-bottom: 0px;
}
</style>
<script>
window.onload = function(){
var op_1 = document.getElementById('od2');
var oul_1 = op_1.getElementsByTagName('ul')[0];
var oa1_1 = oul_1.getElementsByTagName('a');
//-----
var obat_1 = document.getElementById('inbut');
var otext_1 = document.getElementById('intxt');
//---
//点击按钮插件一个LI，并跟据条件给class赋值
obat_1.onclick = function(){
var oli_1 = document.createElement('li');
var oli_2 = oul_1.getElementsByTagName('li');
oli_1.innerHTML=otext_1.value + '<a href="javascript:;">删除</a>';
//
if(oli_2.length>0){
oul_1.insertBefore(oli_1, oli_2[0]);
//判断li%2的值是否为0，然后插入相应的className
for(var i=0;i<oli_2.length;i++){
if(i%2 === 0){
oli_1.className = 'va12';
}
else{
oli_1.className = 'va11';
}
};
}
else{
oul_1.appendChild(oli_1);
}
//点击删除添加的LI
for(var i=0;i<oa1_1.length;i++){
oa1_1[i].onclick = function(){
alert('删除测试');
oul_1.removeChild(this.parentNode);
}
};
};
}
</script>
</head>
<body>
<input type="text" value="这里输入文字" id="intxt" />
<input type="button" value="添加内容" id="inbut" />
<p id="od2">
<ul>
</ul>
</p>
</body>
</html>
迷茫2017-04-10 17:35:54
第一次单击时oli_2.length为0，不走if(oli_2.length>0)里面，因此li附class的代码没有执行到，所以第一个li没有样式，而后面加进来的li可以执行到，所以后来的li样式应用上了。
你的代码除了命名不规范外，还有一个问题：就是你在每次单击时都去遍历已经添加进来的所有li（oli_2），然后根据奇偶去附Class，这样在数量多的时候势必造成性能问题。我的解决办法每次给新加进来的有且只有一个li附class。
只需把你的这段代码改成下面的即可：
if(oli_2.length>0){
oul_1.insertBefore(oli_1, oli_2[0]);
//判断li%2的值是否为0，然后插入相应的className
for(var i=0;i<oli_2.length;i++){
if(i%2 === 0){
oli_1.className = 'va12';
}
else{
oli_1.className = 'va11';
}
};
}
else{
oul_1.appendChild(oli_1);
}
oul_1.appendChild(oli_1);
var len = oli_2.length - 1;
oli_1.className = len % 2 === 0 ? 'va12' : 'va11';
ringa_lee2017-04-10 17:35:54
第一次点击时，oli_2先查找li，oli_2.length===0，后面oli_1被append，这时才oli_2.length>0。
代码可读性有点差，建议变量命名更语义化一点。
