jquery切换图片，但记得最后一张图片答案

【问题标题】：Jquery switch image, but remember the last imagejquery切换图片，但记得最后一张图片
【发布时间】：2018-07-03 23:56:06
【问题描述】：

我正在为我的网站上的移动设备编写菜单。当用户单击向下箭头图像时，将出现子菜单并且图像变为向上箭头。

但是，当用户点击向上箭头时，图像应该变回向下箭头。

到目前为止我的脚本：

<!-- Hide show nav -->
<script>
    $(document).ready(function(){
        $(".show_hide_main_sub_menu").click(function () {
            $("#main_sub_menu").toggle();
            $(".show_hide_main_sub_menu").attr('src',"../_webdesign/images/main/arrow_up.png");
        });
    });
</script>
<!-- //Hide show nav -->

<a href="#"><img src="../_webdesign/images/main/arrow_down.png" alt="arrow_down.png" class="show_hide_main_sub_menu" /></a>

谁能指点我正确的方向？

【问题讨论】：

第一个答案是正确的，你应该用js切换类并使用css改变图像（或如下方向）。

标签： jquery

【解决方案1】：

请勿更换源

可能的解决方案是不替换图像，而只是使用 CSS 旋转元素：transform: rotate(180deg); 作为 jQuery 解决方案 please see this post 的参考。如果您使用 css 过渡，例如：transition: all 0.3s ease-in-out;，您将获得很好的平滑效果，而不会在更改源时获得令人讨厌的闪烁。为了获得最佳的用户体验，您还可以摆脱 png 文件，而是使用 svg 象形图，因为它可以更好地缩放并且尺寸更小。

纯 CSS

同样值得注意的是，效果和用户交互都可以通过纯 css 轻松完成。可以看到at this codepen example 和互联网上的许多其他地方（只需搜索它）。将 jQuery 减少到最低限度总是受欢迎的做法。主要由 CSS 覆盖的 UI 图形功能也很有帮助。这样您就可以更好地优化您的页面。如果 DOM 结构和 CSS 设计得很好，您甚至可以实现更快的加载/渲染，使其在各种浏览器中更加一致，并摆脱与在没有 JS 的情况下处理客户端或使用干扰浏览器插件或使用 jQuery 时的情况相关的问题脚本未在客户端正确加载和初始化（即由于与服务器的通信不良）。

【讨论】：

【解决方案2】：

您可以尝试使用类分配 img src，并根据类进行转换。

例如：

<a href="#" id="clickable"><div class="show_hide_main_sub_menu down_arrow"></div></a>

$(document).ready(function() {
    $("#clickable").click(function() {
        var target = $(this).children(".show_hide_main_sub_menu");
        if (target.hasClass("down_arrow")) {
            target.removeClass("down_arrow");
            target.addClass("up_arrow");
        } else if (target.hasClass("up_arrow")) {
            target.removeClass("up_arrow");
            target.addClass("down_arrow");
        }
    })
})

.down_arrow {
    background-image:url('https://openclipart.org/image/2400px/svg_to_png/154963/1313159889.png');
    background-size:contain;
    background-repeat:no-repeat;
    height:20px;
    width:20px;
}
.up_arrow {
    background-
    image:url('https://cdn.pixabay.com/photo/2013/07/13/09/50/arrow-156118_960_720.png');
    background-size:contain;
    background-repeat:no-repeat;
    height:20px;
    width:20px;
}

Check this fiddle

【讨论】：

【解决方案3】：

您可以检查 src 属性的当前值，并根据结果更改它（和 alt 属性）。

$(document).ready(function() {
  $(".show_hide_main_sub_menu").click(function() {
    $("#main_sub_menu").toggle();
    if ($(".show_hide_main_sub_menu").attr('src') === "../_webdesign/images/main/arrow_down.png") {
      $(".show_hide_main_sub_menu").attr('src', "../_webdesign/images/main/arrow_up.png").attr('alt', 'arrow_up.png');
    } else {
      $(".show_hide_main_sub_menu").attr('src', "../_webdesign/images/main/arrow_down.png").attr('alt', 'arrow_down.png');
    }
  });
});

【讨论】：