jquery在点击时更改图像src，并在第二次点击时恢复为原始图像答案

【问题标题】：jquery change image src on click, and revert to original image on second clickjquery在点击时更改图像src，并在第二次点击时恢复为原始图像
【发布时间】：2017-11-22 22:05:31
【问题描述】：

潜伏已久..第一次发帖。

我正在寻找一个在悬停时动画的播放/暂停按钮，并且点击时从“播放”变为“暂停”按钮。（我用它来触发音频文件）

我通过堆叠两个不同颜色的图像来实现这一点，并在鼠标悬停时在 CSS（不透明度）中进行转换。

我一直在努力更改单击 javascript/jquery 中的 src，我设法开始工作（播放按钮变成暂停按钮，css 转换仍然有效）但我不知道如何制作条件 if/然后声明让它在下次单击时恢复为原始的“播放”按钮图像。

我已经尝试了很多事情，感觉我已经很接近了，但是由于我在 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>

【问题讨论】：

您只需要在单击处理程序之外设置一个名为“clicked”或其他内容的变量。使其最初为假。然后在单击处理程序中，使用 if 语句检查它是否存在，将您的逻辑放在 if/else 块中。在每个条件块中，在完成图像交换后反转该变量的值。我会给你一个代码示例，但我在移动设备上。作为起点，这是否足够有用？
您可以将先前的值存储在另一个属性中，并在点击时翻转两者。
另外，当我说变量时，它可以是标准的 JS 变量，例如 var clicked = false，或者您可以在元素本身上使用数据属性来保持其更紧密的范围，尤其是在您有多个按钮的情况下.最好的方法是使用$(".element").each() 循环遍历每个元素，然后使用$(this) 定位循环中的元素

标签： javascript jquery html css image

【解决方案1】：

您只需检查每个click 中的当前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");
  });
});

演示：

$("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>

【讨论】：

非常感谢您的建议，我已经编辑并添加了我正在使用的图像，仍然无法在单击时将两个图像从“播放”切换到“暂停”同时。这会导致显示错误的“底部”图像。（见例子）..感恩节快乐..如果你在世界的那个地方！
@Sander 您需要从 CSS 中删除 :hover 并确保两个图像不重叠。
我将图像堆叠在一起（顶部有一个红色播放按钮和一个白色播放按钮），并使用:hover 将顶部图像不透明度设置为零，显示下部的两张图片。当我实施您的解决方案时，它适用于顶部图像，单击它会变为白色暂停按钮，并在下次单击时返回白色播放按钮。然而，底部的图像仍然是一个红色的播放按钮，点击时也需要变成一个红色的暂停按钮。

【解决方案2】：

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

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

【讨论】：