javascript - jQuery在单击时更改图像src，并在第二次单击时恢复为原始图像

长时间潜伏。

我希望制作一个在悬停时具有动画效果的播放/暂停按钮，
并在点击时从“播放”按钮变为“暂停”按钮。
（我正在使用它来触发音频文件）

我通过堆叠两个不同的彩色图像来进行此工作，并且将鼠标悬停在CSS（不透明度）中。

我一直在努力更改javascript / jquery中的单击时的src，我设法上班了（播放按钮变成了暂停按钮，css转换仍然有效），但是我不知道如何使条件if / then语句成为使其在下次单击时恢复为原始的“播放”按钮图像。

我已经尝试了很多事情，并觉得自己已经接近了，但是由于我对javascript / jquery几乎没有经验，所以我不知道如何进行。

我希望我的问题是可以理解的，我将非常感谢我能提供的任何帮助！

$("document").ready(function() {
  $("#playpause").click(function() {
    $("#top").attr("src", "//placehold.it/100?text=play");
    $("#bottom").attr("src", "//placehold.it/100?text=pause");
  });
});

#playpause {
  position: relative;
  height: 24px;
  width: 24px;
  margin: 5px 10px 0 0;
}

#playpause img {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

#playpause img.top:hover {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="playpause" class="one column">
  <a id="flytonight" href="#">

    <img class="bottom" id="bottom" src="//placehold.it/100?text=play" />
    <img class="top" id="top" src="//placehold.it/100?text=pause" />

  </a>
</div>

最佳答案

您只需要检查每个src中的当前click属性，并相应地进行更改。您将始终在两个src值之间切换。

$("document").ready(function() {
  $("#playpause img").click(function() {
    if ($(this).attr("src") === "//placehold.it/100?text=play")
      $(this).attr("src", "//placehold.it/100?text=pause");
    else if ($(this).attr("src") === "//placehold.it/100?text=pause")
      $(this).attr("src", "//placehold.it/100?text=play");
  });
});

演示：

$("document").ready(function() {
  $("#playpause img").click(function() {
    if ($(this).attr("src") === "//placehold.it/100?text=play")
      $(this).attr("src", "//placehold.it/100?text=pause");
    else if ($(this).attr("src") === "//placehold.it/100?text=pause")
      $(this).attr("src", "//placehold.it/100?text=play");
  });
});

#playpause {
  position: relative;
  height: 24px;
  width: 24px;
  margin: 5px 10px 0 0;
}

#playpause img {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 0.7s ease-in-out;
  -moz-transition: opacity 0.7s ease-in-out;
  -o-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="playpause" class="one column">
  <a id="flytonight" href="#">
    <img class="bottom" id="bottom" src="//placehold.it/100?text=play" />
  </a>
</div>

关于javascript - jQuery在单击时更改图像src，并在第二次单击时恢复为原始图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47444591/