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");

    });
});

当我点击文字＆＃34;点击我＆＃34;时，我希望矩形消失，但没有任何反应。我已经用一个警告框检查了其他所有工作。这是我的第一次尝试，所以我希望它可能是非常简单的我做错了。任何帮助表示赞赏。

Answer 1

这是因为CSS选择器的特殊性。您正在尝试使用类覆盖ID。哪个不起作用，因为ID具有比一个类更高的特异性。

# = ID

. =等级

这里的主要内容是改变选择器的特性，我在下面列出了几个选项。

将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和.之间没有空格）。这将定位ID为#rect 且为.closed类的元素。

$("#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

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

切换方法：

$(document).ready(function(){

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

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

    });
});

DEMO

重要方法：

.closed {
    height: 0!important;
}

DEMO

Answer 3

如果您只是想让矩形不可见，可以尝试将display属性设置为none：

#rect{

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

.closed {
    display: none; 
}

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

addClass方法不起作用

3 个答案:

将ID更改为Class

使用不同的CSS属性

提高CSS选择器的特异性