javascript - 我有一门课，我想打开它，但它不能正常工作

Question

当我单击一个按钮时，我试图将一个类切换到我的一个 div 上，由于某种原因，该类将添加到 div 中，但实际的 CSS 属性不会发生。我尝试运行的函数在底部。

这是我的代码:

HTML

<div class="mainPage">
   <form class="homeButton" action="">
      <input type="submit" value="Click to see who has had a worse day!">
   </form>
</div>
<div class="textBox">
   <h3>On (fill date), this person had a really terrible day.</h3>
   <div class="badEvent">
      <p>
      </p>
   </div>
   <button>Close</button>
</div>

CSS

.mainPage {
   background-color: #043D5D;
   color: white;
   text-align: center;
   position: relative;
   top: 0px;
   left: 0px;
   right: 0px;
   h2 {
      font-size: 4em;
   }
   p {
      font-size: 2em;
   }
   form {
      padding-bottom: 20px;
      input {
         width: 350px;
         height: 50px;
         border-radius: 10px;
         font-size: .95em;
         border: 1px solid #EB5055;
         background-color: #EB5055;
         cursor: pointer;
      }
   }
}


.replace {
   background-color: red;
}

JS

$(".homeButton").on("click", function(event){

   event.preventDefault();
   $(".textBox").toggleClass('.replace');

});

Answer 1

事情是，声明:

$(".textBox").toggleClass('.replace');

您实际上是在切换类 .replace 而不是 replace。 . 仅用于查询过程。类名仍然只是replace。所以，改成

$(".textBox").toggleClass('replace');

和代码 will work .