Question

这是css代码：

.big-square {
position:relative;
height:768px;
width:768px;
border:1px solid black;
background-color:#007da9;
text-align:center;
display:table-cell;
-webkit-transition:all 0.3s linear;

}

这里是html：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script>
    function showmenu() {
        $(document).ready(function() {
            $("#big-square").removeClass("big-square");
        });
    }
    </script>
</head>
<body>
    <div id="big-square" onclick="showmenu();" class="big-square">1</div>
    <div id="big-square" onclick="showmenu();" class="big-square">2</div>

问题是当我点击任何一个方块时，只是第一个消失，我想分别消失。例如，如果我点击第二个方格，则只需要第二个方格消失。

Answer 1

id在整个DOM中必须是唯一的。（且相关函数仅返回第一个）

你想要的是

＆＃13;

$(document).ready(function() {
  $(".big-square").on('click', function() {
    $(this).removeClass("big-square");
  });
});

＆＃13;

.big-square {
  position: relative;
  height: 768px;
  width: 768px;
  border: 1px solid black;
  background-color: #007da9;
  text-align: center;
  display: table-cell;
  -webkit-transition: all 0.3s linear;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="big-square">1</div>
<div class="big-square">2</div>

＆＃13;

Answer 2

使用id不是唯一的非法HTML。如果您计划拥有2个或更多类似“东西”的元素，请使用课程。然后，您不应该将ready语句嵌套在函数中。接下来，您不应该使用onclick，而是选择收听事件点击。另外，css .class与你的html的id不匹配。最后，我只使用jQuery对象$(this)。

所以，所有这些，我会重新编写你的代码：

  <script>
$(document).ready(function() {
        $(".big-square").click(function() { 
             $(this).removeClass("big-square");
    });
});
</script>
</head>
<body>
    <div class="big-square" id="square1">1</div>
    <div class="big-square" id="square2">2</div>

Answer 3

那个新手编码。让我们尝试解决它：

1 - 每个元素的不同id（如用户Vic指出的那样）

2 - $（文件）.ready不需要嵌套

3 - onclick =＆＃34; showmenu（）;＆＃34;是完全不必要的，包括html中的脚本是现代Web开发中的不良做法

我不会发布任何代码，因为我看到你已经有了代码答案：）

Javascript removeClass（）问题

3 个答案: