Javascript jquery在单击时更改图像src，并在第二次单击时恢复为原始图像

长期潜伏者。。第一个帖子

我想制作一个播放/暂停按钮，在悬停时播放动画， 点击时，按钮会从“播放”变为“暂停”。 （我用它来触发音频文件）

我将两个不同颜色的图像叠加在一起，并在鼠标上方使用CSS（不透明度）进行转换

我一直在努力更改javascript/jquery中单击时的src，我成功地实现了这一点（play按钮变为pause按钮，css转换仍然有效），但我不知道如何生成条件if/then语句，以便在下次单击时将其恢复为原始的“play”按钮图像

我已经尝试了很多东西，感觉很接近，但由于我在javascript/jquery方面几乎没有经验，所以我不知道如何继续

我希望我的问题是可以理解的，我会非常感谢任何我能得到的帮助

$（“文档”）.ready（函数（）{
$（“#播放暂停”）。单击（函数（）{
$（“#top”）.attr（“src”，“//placehold.it/100？text=play”）；
$（“#bottom”）.attr（“src”，“//placehold.it/100？text=pause”）；
});
});
#播放暂停{
位置：相对位置；
高度：24px；
宽度：24px；
利润率：5px10px0；
}
#播放暂停img{
位置：绝对位置；
左：0；
-webkit过渡：不透明度0.7s易入易出；
-moz过渡：不透明度0.7s缓进缓出；
-o型过渡：不透明度0.7s缓进缓出；
过渡：不透明度0.7s缓进缓出；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
}
#播放暂停图像顶部：悬停{
不透明度：0；
}
很抱歉，我没有对您的问题给予足够的重视，这将是一个解决方案：

var playToggle = false;
    $("#playpause").click(function() {
            if (playToggle === true){
               $("#top").attr("src", "//placehold.it/100?text=play");
               $("#bottom").attr("src", "//placehold.it/100?text=pause");
            else{
               $("#bottom").attr("src", "//placehold.it/100?text=play");
               $("#top").attr("src", "//placehold.it/100?text=pause");
            }
        playToggle = !playToggle;
      });

很抱歉，我没有对您的问题给予足够的重视，这将是一个解决方案：

var playToggle = false;
    $("#playpause").click(function() {
            if (playToggle === true){
               $("#top").attr("src", "//placehold.it/100?text=play");
               $("#bottom").attr("src", "//placehold.it/100?text=pause");
            else{
               $("#bottom").attr("src", "//placehold.it/100?text=play");
               $("#top").attr("src", "//placehold.it/100?text=pause");
            }
        playToggle = !playToggle;
      });

您只需检查每个
单击中的当前
src
属性，并相应地更改它。您将始终在两个
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");
  });
});

演示：


$（“文档”）.ready（函数（）{
$（“#播放暂停img”）。单击（函数（）{
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”）；
});
});
#播放暂停{
位置：相对位置；
高度：24px；
宽度：24px；
利润率：5px10px0；
}
#播放暂停img{
位置：绝对位置；
左：0；
-webkit过渡：不透明度0.7s易入易出；
-moz过渡：不透明度0.7s缓进缓出；
-o型过渡：不透明度0.7s缓进缓出；
过渡：不透明度0.7s缓进缓出；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
}
您只需检查每个
单击中的当前
src
属性，并相应地更改它。您将始终在两个
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");
  });
});

演示：


$（“文档”）.ready（函数（）{
$（“#播放暂停img”）。单击（函数（）{
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”）；
});
});
#播放暂停{
位置：相对位置；
高度：24px；
宽度：24px；
利润率：5px10px0；
}
#播放暂停img{
位置：绝对位置；
左：0；
-webkit过渡：不透明度0.7s易入易出；
-moz过渡：不透明度0.7s缓进缓出；
-o型过渡：不透明度0.7s缓进缓出；
过渡：不透明度0.7s缓进缓出；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=0）”；
过滤器：alpha（不透明度=0）；
}

您只需要在单击处理程序之外设置一个名为“clicked”的变量。让它一开始是假的。然后在click处理程序中，用if语句检查它是否存在，将逻辑放入if/else块中。在每个条件块中，在完成图像交换后反转该变量的值。我会给你一个代码示例，但我在手机上。作为起始块，这足够有用吗？您可以将上一个值存储在另一个属性中，并在单击时翻转这两个值。另外，当我说variable时，它可以是一个标准的JS属性，如
var clicked=false
，或者您可以在元素本身上使用一个数据属性，以使其更接近范围，特别是如果你有多个按钮。通过使用
$（“.element”）.each（）遍历每个元素，然后使用
$（this）
将循环中的元素作为目标（this）
，您只需要在单击处理程序之外设置一个名为“clicked”的变量。让它一开始是假的。然后在click处理程序中，用if语句检查它是否存在，将逻辑放入if/else块中。在每个条件块中，在完成图像交换后反转该变量的值。我会给你一个代码示例，但我在手机上。作为起始块，这足够有用吗？您可以将上一个值存储在另一个属性中，并在单击时翻转这两个值。另外，当我说variable时，它可以是一个标准的JS属性，如
var clicked=false
，或者您可以在元素本身上使用一个数据属性，以使其更接近范围，特别是如果你有多个按钮。通过使用
$（“.element”）.each（）
循环每个元素，然后使用
$（此）
以循环中的元素为目标，这将是最好的方法。非常感谢您的建议，我已经编辑并添加了我正在使用的图像，如果要同时将两个图像从“播放”切换到“暂停”，仍然有困难。这会导致显示错误的“底部”图像。（见示例）