这段JS 点击改变DIV名,如何实现,点击改变再点击改变,循环,
<!DOCTYPE html>
<html>
<head>
<style>
.c1{background:red;}
.c2{ background:blue;}
</style>
</head>
<body>
<script>
function changeclass(){
var divEle= document.getElementById('diva');
divEle.className='c2';
}
</script>
<div id='diva' class='c1'>111</div>
<input type='button' onclick='changeclass()' value='改变名字'/>
</body>
</html>
使用三元表达式控制className,修改函数如下:
function changeclass(){
var divEle= document.getElementById('diva');
divEle.className=(divEle.className=='c1'?'c2':'c1');
}
不是改变名字是改变样式吧?
现在代码的问题是点击触发事件后,函数中始终将className设置为c2,因此不会改变
加上判断,如果当前为c2则改为c1,如果为c1则改为c2
三元表达式不熟悉的话可以写成
<script>
function changeclass(){
var divEle= document.getElementById('diva');
if(divEle.className == 'c2'){
divEle.className = 'c1'
}
else
{
divEle.className = 'c2'
}
}
</script>
$(document).ready(function(){
$("button").click(function(){
$('#diva').toggleClass(function(){
return 'c2'
});
});
});
修改script标签
<script>
var flag = true;
function changeclass(){
var divEle= document.getElementById('diva');
if(flag){
divEle.className='c2';
flag = false;
}else{
divEle.className='c1';
flag = true;
}
}
</script>