javascript - 如何切换按钮图标和说明javascript

这是我的问题。我需要点击以更改按钮图标，再点击以转到原始状态，如+，-和范围描述，如主页/返回
我不知道该怎么办。请帮忙。
这是html。。。

<div class="navbar-left left">
    <button   class="toggle btn mr2 white " >
              <i  class="fa fa-home fa-2x   "></i>
              <span class="mobile-hide  ">Home</a>
    </button>
          </div>

还有坏的js

if ($('.toggle').hasClass('fa fa-home fa-2x')) {
    $('.toggle').toggleClass('fa fa-home ').html('<span  class="mobile-hide  ">Home</a>');

} else($('.toggle').hasClass('fa fa-home ')) {
    $('.toggle').toggleClass('fa fa-home fa-2x ').html('<span  class="mobile-hide  ">Back</a>');
}
toggleMenu();
});

最佳答案

你可以

jQuery(function($){
    $('.toggle').click(function () {
        var $i = $(this).find('i').toggleClass('fa-2x');
        $(this).find('span.mobile-hide').html($i.hasClass('fa-2x') ? 'Home' : 'Back')
    })
})

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar-left left">
    <button class="toggle btn mr2 white" >
        <i class="fa fa-home fa-2x"></i>
        <span class="mobile-hide">Home</span>
    </button>
</div>