我有一个正在尝试打开的课程，但无法正常工作

Question

I am trying to toggle a class onto one of my divs when I click on a button and for some reason the class will be added to the div but the actual CSS properties do not happen. The function that I am trying to run is at the bottom.

Here is my code:

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

The thing is, with the statement:

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

you are actually toggling the class .replace and not replace . The . is only for querying process. The class name is still replace only. So, change to

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

and the code will work .

Answer 2

Is that the entire stylesheet or did you cut it off for brevity? If it's not cut off, check the last bracket that seems to be missing after .replace and remove the period from the toggleClass.

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

Answer 3

Change to this:

$(".homeButton").on("click", function(event){ // add event inside the brackets
    event.preventDefault();
    $(".textBox").toggleClass('replace'); // remove the . from ('.replace')
});

Change .replace to replace since you are already toggling a class.

In the click function add an event parameter since you are using event.preventDefault();

JSFiddle Demo

Answer 4

Your class .homeButton must be on your button, not in your form tag. Also, if you are not sending the form it's better just to use an anchor tag or a button tag without the form.