时间戳

首页 > 解决方案 > 无法使用 JQuery 删除 HTML 类

javascript - 无法使用 JQuery 删除 HTML 类

问题描述

我的代码有问题，我真的很难理解为什么它不起作用。我将我的代码放在 JSFiddle 上，以便您对其进行测试（https://jsfiddle.net/veka33/3rv0wft7/21/）。使用我的代码，我在单击按钮时启动动画。动画运行后，当我单击 div 时，它会完全显示。当 div 展开时，我想改变 div 的位置，所以我不能完全看到它。我想通过单击退出按钮删除类“.scoreExpand”来做到这一点。但是，我无法删除此类。

$(document).ready(function() {
  $("#clickMe").click(function() {
    $(".score").addClass("showScore");
  });
  $(".score").click(function() {
    $(".score").removeClass("showScore");
    $(".score").addClass("scoreExpand");
    $("#exitScore").css("visibility", "visible");
  });
  $("#exitScore").click(function() {
    $(".scoreExpand").removeClass("scoreExpand");
  });

});
.score {
  position: fixed;
  top: 100px;
  right: -250px;
  height: 100px;
  width: 200px;
  border-radius: 2em;
  color: white;
  background-color: grey;
  border-color: yellow;
  border-style: solid;
  border-width: 10px;
}

.showScore {
  animation: showScoreboard 3s;
  animation-fill-mode: forwards;
  right: -250px;
}

.scoreExpand {
  animation: fixScoreboard 1s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  right: 50px;
}

#flexContainer {
  display: flex;
  flex-direction: row;
  margin-top: 30px;
  justify-content: space-around;
}

@keyframes showScoreboard {
  50% {
    right: 50px;
  }
  100% {
    right: -150px;
  }
}

@keyframes fixScoreboard {
  0% {
    right: -150px;
  }
  50% {
    right: -50px;
  }
  100% {
    right: 50px;
  }
}

#exitScore {
  position: absolute;
  left: 220px;
  top: 35px;
  font-size: 30px;
  color: yellow;
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
  <button id="clickMe">Clicke Me!</button>
</div>
<div class="score">
  <div id="flexContainer">
    <i class="fa fa-star" style="font-size: 30px; color: yellow;"></i>
    <p style="padding-right: 50px; font-size: 20px; vertical-align: top; line-height: 0px;" id="scoreDisplay">Score: </p>
  </div>
  <i class="fa fa-times-circle" id="exitScore"></i>
</div>

标签： javascripthtmljquerycss

解决方案

您添加了两个对同一对象执行相反操作的侦听器。只需更改包含侦听器的元素... 

$(document).ready(function(){
    $("#clickMe").click(function(){
    $(".score").addClass("showScore");
  });
  $("#flexContainer").click(function(){
     $(".score").removeClass("showScore");
     $(".score").addClass("scoreExpand");
     $("#exitScore").css("visibility","visible");
  });
    
  $("#exitScore").click(function(){
     $(".scoreExpand").removeClass("scoreExpand");
  });
    
});

推荐阅读