Javascript removeClass() issue

下面是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>

问题是，当我点击任何正方形，只是第一个消失，我想让它消失单独。例如，如果我点击第二个正方形，只有第二个正方形消失了。

id在整个DOM中必须唯一。(和相关函数只返回第一个)

你想要的是

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

.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;
}

<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>

id不唯一是违法的。如果你打算有2个或更多类似"东西"的元素，可以使用类。然后，不应该在函数中嵌套ready语句。接下来，您不应该使用onclick，而是选择侦听事件click。此外，css .class与html的id不匹配。最后，仅针对1项，我将使用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>

这是新手编码。让我们试着修复它:

1 -每个元素的id不同(正如用户Vic已经指出的)

2 - $(文档)。Ready不需要嵌套

3 - onclick="showmenu();"是完全没有必要的，在现代web开发中，在HTML中包含脚本是不好的做法

我不会张贴任何代码，因为我看到你已经有答案与代码:)

相关内容

最新更新

热门标签：