javascript - 单击更改图标

Question

我正在尝试在播放音频时更改图标。

因此，当用户将鼠标悬停在图像上时，将出现一个播放 按钮。然后用户将单击 play 按钮，然后音频将开始播放。我想在播放音频时将图标更改为 pause 按钮，然后当用户想要停止音频时，他们将单击 pause 按钮并且它将返回到 play 按钮。我认为我的代码可以通过删除和添加类来工作，但事实并非如此。

var audio = document.getElementById("audio");

function play() {
  icon = $(this).find("i");
  if (audio.paused) {
    audio.play();
    icon.addClass("fa-pause-circle").removeClass("fa-play-circle");
  } else {
    audio.pause();
    icon.addClass("fa-play-circle").removeClass("fa-pause-circle");
  }
}

#credits-content {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 15px;
  height: 750px;
  width: 80%;
  margin: 0 10% 50px 10%;
}

#images-services {
  grid-row: span 1;
  grid-column: span 1;
}

.image-item {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f1f1f1;
}

#coward-image:hover {
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

#coward-image {
    background-image: url("https://i.ytimg.com/vi/xQ0_zWouE8c/maxresdefault.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, 0.0);
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

#coward-play {
    opacity: 0;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

#coward-image:hover #coward-play{
    opacity: 1;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="credits">
  <div id="credits-content">
    <div id="coward-image" class="image-item images-services">
      <audio src="songs/memo.m4a" id="audio"></audio>
      <i class="far fa-play-circle fa-7x" id="coward-play" onclick="play()"></i>
    </div>
  </div>
</div>

Answer 1

函数中的 this 不引用元素，因为您只能访问 this 以获取内部的 HTML onclick 事件实际属性。此外，由于您已将 onclick 附加到图标本身，因此无需使用 find()，因为该方法会返回元素的后代节点。如果将 onclick 移动到 div 并将 this 作为参数传递给函数，则基本上可以按编写的方式使用代码。我做了一个 Codepen here