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。

Answer 2

这是整个样式表还是为了简洁而将其剪掉？如果它没有被切断，请检查.replace之后似乎缺少的最后一个括号，并从toggleClass中删除句点。

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

Answer 3

更改为：

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

将.replace更改为replace，因为您已经在切换课程。

在点击功能中添加event参数，因为您使用的是event.preventDefault();

<强> JSFiddle Demo

Answer 4

您的班级.homeButton必须在您的按钮上，而不在您的表单标签中。此外，如果您不发送表单，最好只使用锚标记或没有表单的按钮标记。

我有一个班级，我试图切换，但它不能正常工作

4 个答案: