Question

这是我的问题。我需要点击更改按钮图标，然后在另一次点击上转到原始状态，如+， - 和范围描述，如家/后我不知道该怎么办。请求帮助。这是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();
});

Answer 1

你可以

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您只能使用.hasClass()来检查单个班级名称。

为了检查许多类名，我猜最好获取class属性字符串并检查.indexOf()

  if ($('.toggle').attr("class").indexOf('fa fa-home fa-2x') != -1) {

toggleClass也是如此。你必须打破它：

 $('.toggle').toggleClass('fa').toggleClass('fa-home').toggleClass('fa-2x')

Answer 3

您可以使用::after伪元素实现此效果。只需根据按钮上的某个类更改content属性即可。

简化示例：

＆＃13;

$(function () {

  $('#toggle').click(function () {
    $(this).toggleClass('on');
  });
  
});

＆＃13;

.icon::after {
  content: '+';
}

.text::after {
  content: 'Home';
}

.on .icon::after {
  content: '-'
}

.on .text::after {
  content: 'Back'
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<button id="toggle">
  <i class="icon"></i>
  <span class="text"></span>
</button>

＆＃13;

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

3 个答案: