addClass 方法不起作用

Question

我在自学jquery。我第一次尝试使用 jquery 更改 dom 的元素。特别是我正在尝试使用方法 addClass 使蓝色矩形消失。这是简单的代码：

html

<!DOCTYPE html>
<html>
    <head>
        <title>test slider</title>

        <link rel="stylesheet" type="text/css" href="styles.css">

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript" src="script.js"></script>


    </head>

    <body>

        <span id="rect"></span>

        <p id="button"> click here </p>

    </body>

</html>

css

#rect{

    float: left;
    height: 400px;
    width: 550px;
    background-color: blue;
}

.closed {
    height: 0;
}

#button {
    float: right;
    margin-top: 200px;
    margin-right: 500px;
}

jquery

$(document).ready(function(){

    $("#button").click(function(){

        $("#rect").addClass("closed");

    });
});

我希望在单击文本 "click me" 时矩形会消失，但没有任何反应。我已经检查了一个警告框，其他所有内容 works.This 都是我的第一次尝试，所以我希望这可能是我做错的非常简单的事情。任何帮助表示赞赏。

Answer 1

那是因为您的 CSS 选择器的特殊性。您正在尝试使用 class 覆盖 ID。这是行不通的，因为 ID 比 class.

具有更高级别的特异性

# = ID

. = Class

这里的主要内容是更改选择器的特异性，我在下面概述了一些选项。

将 ID 更改为 Class

将 #rect 更改为 .rect。

$("#button").click(function() {

  $(".rect").addClass("closed");

});

.rect {
  float: left;
  height: 400px;
  width: 550px;
  background-color: blue;
}
.closed {
  height: 0;
}
#button {
  float: right;
  margin-top: 200px;
  margin-right: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="rect"></span>
<p id="button">click here</p>

使用不同的 CSS 属性

如果您不想更改您的 ID，那么您可以 .closed 应用 #rect 尚未设置的属性，但也会隐藏该元素，例如display: none;.

$("#button").click(function() {

  $("#rect").addClass("closed");

});

#rect {
  float: left;
  height: 400px;
  width: 550px;
  background-color: blue;
}
.closed {
  display: none;
}
#button {
  float: right;
  margin-top: 200px;
  margin-right: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="rect"></span>
<p id="button">click here</p>

增加CSS选择器特异性

根据下面的评论，您可以更改其中一个选择器以使其更具体。

将.closed更改为#rect.closed（t和.之间没有space）。这将以 ID 为 #rect 和为 .closed.

的 class 为目标的元素

$("#button").click(function() {

  $("#rect").addClass("closed");

});

#rect {
  float: left;
  height: 400px;
  width: 550px;
  background-color: blue;
}
#rect.closed {
  height: 0;
}
#button {
  float: right;
  margin-top: 200px;
  margin-right: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="rect"></span>
<p id="button">click here</p>

Answer 2

因为您正在为您的跨度使用 ID 并且 class 添加 class 拒绝覆盖 ID 的高度。纠正此问题的一种方法是使用 !important ，这要求它覆盖确定该元素高度的任何其他内容。另一种方法是让两个 class 切换

切换方法：

$(document).ready(function(){

    $("#button").click(function(){

        $("#rect").toggleClass("closed open");

    });
});

DEMO

重要方法：

.closed {
    height: 0!important;
}