Question

我觉得我在这里遗漏了一些非常基本的东西。

我在标记中基本上有2个div。单击一个（#x）时，另一个（＃block1）获取一个新类（.change），并更改其颜色。

唯一的问题是点击功能中的选择器（＆＃34;＃block1＆＃34;）。如果我用类替换第一个div的id，它可以正常工作。但是使用id会使其无效。

＆＃13;

$(document).ready(function() {
  $("#x").click(function() {
    $("#block1").toggleClass("change");
  });
});

＆＃13;

#block1 {
  width: 20vw;
  height: 20vw;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x {
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
}

.change {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="block1"></div>
<div id="x"></div>

＆＃13;

Answer 1

您需要将＃block1与.change一起添加，以覆盖＃block1中给出的背景颜色。希望这是你正在寻找的。

＆＃13;

   $("#x").click(function(){
     $("#block1").toggleClass("change");
   });

＆＃13;

#block1{
  width: 20vw;
  height:20vw;
  background:gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x{
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
    }

#block1.change {
  background: red;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
   </div>

   <div id ="x">
   </div>

＆＃13;

Answer 2

由于样式优先，您的班级.change不会覆盖#block1中设置的背景颜色。

在这个特定的例子中，你必须更具体。

改变这个：

.change {
    background: red;
}

对此：

#block1.change {
    background: red;
}

Answer 3

＆＃13;

$(document).ready(function(){
   $("#x").click(function(){
     $("#block1").toggleClass("change");
   });
});

＆＃13;

 

#block1{
  width: 20vw;
  height:20vw;
  background:gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x{
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
    }

#block1.change {
  background: red;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
   </div>

   <div id ="x">
   </div>

＆＃13;

原因是赋予#block1的样式会覆盖.change类的样式，将您的风格改为此

 #block1.change {
     background: red;
    }

在此处了解有关css优先级的更多信息https://developer.mozilla.org/en/docs/Web/CSS/Specificity

Answer 4

将red背景添加到特定ID选择器#block1.change并不好。如果您想在多个元素上添加change类，那么您应该使用background覆盖.change课程中的!important属性（因为css #block1自己有background:gold）喜欢，

.change {
    background: red !important;
}

代码段，

＆＃13;

$(function() {
  $("#x").click(function() {
    $("#block1").toggleClass("change");
  });
});

＆＃13;

#block1 {
  width: 20vw;
  height: 20vw;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x {
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
}

.change {
  background: red !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1">
</div>

<div id="x">
</div>

＆＃13;

Answer 5

您应该将!important添加到CSS中，否则它不会覆盖gold颜色：

.change {
  background: red !important;
}

所以整个代码应该是这样的：

$(document).ready(function() {
  $("#x").click(function() {
    $("#block1").toggleClass("change");
  });
});

#block1 {
  width: 20vw;
  height: 20vw;
  background: gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x {
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;
  right: -60vw;
  top: -15vw;
  cursor: pointer;
}

.change {
  background: red !important;
}

<body>
  <div id="block1">
  </div>

  <div id="x">
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">


  </script>
</body>

Answer 6

你可以使用它，你应该正确阅读css属性。

<!DOCTYPE html>
<html>
<head>
  <title>ok</title>
  <script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#block1{
  width: 20vw;
  height:20vw;
  background:gold;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#x{
  height: 5vw;
  width: 5vw;
  background: #333;
  position: relative;

    }

#block1.change {
  background: red;
  }
</style>

</head>
<body>
<div id="x">
  asa
</div>
<div id="block1">
  aasds
</div>
<script type="text/javascript">
  $( document ).ready(function() {

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

        $("#block1").toggleClass("change");

    });

});
</script>

</body>
</html>

Id选择器不能在jQuery中工作

6 个答案: