Question

我有一个简单的网页，其中三个div被设计为圆形和两个正方形。单击div时，display属性设置为none，因此圆/方应消失。当我点击第一个方块（＃square1）时，第二个方块（＃square2）消失。为什么会这样？

<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquerylatest.min.js"> 
</script>
<style type="text/css">
    #circle{
        width:100px;
        height:100px;
        border-radius:50px;
        background:red;

    }
    #square1, #square2{
        width:100px;
        height:100px;
        background:green;
        margin-top:10px;

    }
</style>    
</head>

<body>
    <div id="circle"></div>
    <div id="square1"></div>
    <div id="square2"></div>

    <script>
        $("div").click(function(){
        $(this).css("display","none");
        });
    </script>
</body>
</html>

Answer 1

第二个方块不会消失，第一个方块会消失，第二个方块会填充它的位置，因为您正在设置display: none;

尝试将$(this).css("display","none");更改为$(this).css("visibility","hidden");

并将您的div更改为：

<div id="square1">1</div>
<div id="square2">2</div>

所以你可以看到哪个实际上被隐藏了。

看看https://jsfiddle.net/jreljac/vhxkbnby/2/ 我已经改变了第二方的颜色（正如@Jonathan Lonowski所说），以帮助更好地看到差异

这用jquery选择了错误的元素

1 个答案: