javascript - 单击时切换图像 (jQuery)

Question

我有一个导航按钮，我想在用户每次点击它时更改图像(从菜单图标到关闭图标)，这是我当前使用的代码，但是当我将文本交换为图像时出于某种原因，关闭图标不会“返回”菜单图标。

有什么帮助吗？谢谢。

$(function() {
  $('.mobileMenu').on('click', function(e) {
    $('body').toggleClass('menuOpened');
    $(this).html($(this).html() == 'Close' ? 'Menu' : 'Close');
  });
});

<div class="mobileMenuRight">
  <a href="/cart" class="mobileCart"><img src="../cartIcon.png" alt="Cart" height="22"></a>
</div>

Answer 1

希望这就是您要找的。

$('.mobileMenuRight').click( function() {
  if (!$('.mobileMenuRight').hasClass('menuOpened')) {
    $('.mobileMenuRight').addClass('menuOpened');
    $('.mobileCart ' + 'img').attr({
      src: "http://via.placeholder.com/250x250/000000/8888888",
    });
  } else {
    $('.mobileMenuRight').removeClass('menuOpened');
    $('.mobileCart ' + 'img').attr({
      src: "http://via.placeholder.com/250x250/8888888/000000",
    });
  }
});

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

<div class="mobileMenuRight">
  <a href="#" class="mobileCart"><img src="http://via.placeholder.com/250x250/8888888/000000" alt="Cart" height="22"></a>