点击切换图片（jQuery）

Question

I have a navigation button and I want to change the image everytime the user clicks on it (from the Menu icon to the Close icon), this is the code I'm currently using but when I swap the text to images the Close icon doesn't "go back" to the Menu icon for some reason.

Any help? Thanks.

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

Hope this is what you are looking for.

 $('.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>