单击更改图标

Question

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

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

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;
}

Answer 1

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

Answer 2

您正在$(this)函数中使用play尝试引用i icon，这是不正确的范围。如果需要，您可以执行onclick="play(this)"并将对象引用（i图标元素）传递到play函数中，并以$(thisElement)作为对象在那里正确使用它play函数中的引用。另外，如果您使用的是jQuery，则可以通过其i icon的id属性来引用$('#coward-play')，而不用使用.find()。 find()寻找嵌套元素...

我在下面创建了一个示例，该示例显示了使用.on('click')的{​​{1}}功能绑定到您的jQuery的另一种方法，但是注释了该代码。我已使示例使用coward-play icon路由来保持与原始代码的距离。

我还向您的onclick="play(this)"元素中添加了onended="reset()"，以便当音频播放完毕后，它将按预期将图标重置回播放按钮。

警告，播放音频时发出马声。

audio

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


// THIS IS AN ALTERNATE WAY OF DOING THE CLICK VIA JQUERY
/*
$('#coward-play').on('click', function() {
  play(this);
});
*/

function play(thisElement) {
  if (audio.paused) {
    audio.play();
    $(thisElement).addClass("fa-pause-circle").removeClass("fa-play-circle");
  } else {
    audio.pause();
    $(thisElement).addClass("fa-play-circle").removeClass("fa-pause-circle");
  }
}

function reset() {
  $('#coward-play').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;
}

Answer 3

您可以使用一些JS和JQuery完成此操作。

var click = 1;

function myFunction() {

  if (click < 18) {
    $('#coward-play').click(function() {

      $('#coward-play').addClass('fa-pause-circle');
      $('#coward-play').removeClass('fa-play-circle');
      click = 20;
      console.log(click);
    });
  }
  if (click > 18) {
    $('#coward-play').click(function() {
      $('#coward-play').addClass('fa-play-circle');
      $('#coward-play').removeClass('fa-pause-circle');
      click = 1;
      console.log(click);
 
    });
  }
}

#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="myFunction()"></i>
    </div>
  </div>
</div>