使用JQ对2个重叠层点击互换问题

发布网友发布时间：2022-05-16 00:19

共4个回答

懂视网时间：2022-05-16 04:41

本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法。分享给大家供大家参考。具体如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三个层重叠，点击可切换</title>
<script type="text/javascript">
function $(obj){
return document.getElementById(obj);
}
function change(n){
for (var i=1;i<4;i++){
if(n==i){
$("a"+i).style.zIndex="100";
}else{
$("a"+i).style.zIndex="0";
}
}
}
</script>
</head>
<body>
<div id="a1"
style="position:absolute;left:100px;top:100px;width:100px;height:100px;
background-color:#ddeeff;z-index:1" onclick="change('1')" >
</div>
<div id="a2"
style="position:absolute;left:150px;top:130px;width:100px;height:100px;
background-color:#eeffdd;z-index:2" onclick="change('2')">
</div>
<div id="a3"
style="position:absolute;left:200px;top:160px;width:100px;height:100px;
background-color:#ffddee;z-index:3" onclick="change('3')">
</div>
<div>http://www.gxlcms.com/</div>
</body>
</html>

热心网友时间：2022-05-16 01:49

JS，调试是一个比较难受的问题~！
现在都不做这个了，不过以前我也蛮少用调试框架。
就是根据经验判断的，然后在语句前后alert。
如果，你不好判断就在语句头alert，凡是不能执行的地方在把alert前移一句。

虽然没有告诉你具体的答案，但是我觉得这个东西更重要。

然后，要注意的是：有时候你考虑的方案有可能就会有错误的哟！要注意兼容性。来自：求助得到的回答

热心网友时间：2022-05-16 03:07

就是说你这里只想通过z-index这个css来控制哪个在前，哪个再后是吧？
$("#div1").click(function(){
$("#div2").css("z-index",$(this).css("z-index")+1);
});
$("#div2").click(function(){
$("#div1").css("z-index",$(this).css("z-index")+1);
});

热心网友时间：2022-05-16 04:41

$("#div2").css('z-index')
这个得到的是字符形式的，转换成数字的试下
Number($("#div2").css('z-index'));追问改成这个还是不行呀，
$("#div1").click(function(){$(this).css({'z-index':Number($("#div2").css('z-index'))+1})});
$("#div2").click(function(){$(this).css({'z-index':Number($("#div1").css('z-index'))+1})});

追答alert一下，看$("#div2").css('z-index')
是多少