Question

首先，让我清楚一点，我已经搜索了很多东西，但找不到能解决我问题的答案。我有一个按钮，当我点击它的图标更改和一些函数被调用时，当我再次点击该按钮时，它的图标必须恢复，并再次调用相同的功能。

我有这个按钮：

<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>

单击该按钮时，应调用这些函数和类：

$('#voice_icon').click(function () {
        voiceAtion.voice();
        test.start();
        $('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
        $('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
    });

当我再次点击该图标时，应再次调用这些图标和类：

test.abort();
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");

$('#voice_icon').click(function() {
  voiceAtion.voice();
  test.start();
  $('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
  $('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
});

test.abort();
$('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
$('#mic').html("Mic.");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>

Answer 1

尝试这样的事情第一次点击转到其他地方，然后第二次点击转到if。等...... ..

$('#voice_icon').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
    //first code
  } else {
     //second code
  }
  $(this).data("clicks", !clicks);
});

Answer 2

而不是addClass/removeClass使用toggleClass。

$('#voice_control').toggleClass("fa-microphone-slash fa-microphone");

Answer 3

使用hasClass进行检查which class to remove and add

＆＃13;

$(document).ready(function() {
  $('#voice_icon').click(function() {
    if ($('#voice_control').hasClass("fa-microphone")) {

      $('#voice_control').addClass("fa-microphone-slash").removeClass("fa-microphone");
      $('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
    } else {
      $('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash");
      $('#mic').html("Mic.");
    }

  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn" id="voice_icon" title="microphone">
<i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
<small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>

＆＃13;

Answer 4

   // You can also use global variable and check for true false:


   <button type="button" class="btn" id="voice_icon" title="microphone">
    <i style="font-size: 24px;" class="fa fa-microphone fa-2x voice_control" id="voice_control"></i>
    <small class="toolbar-label mic-btn" id="mic">Mic.</small>
</button>

    <script>
        var x = true;
        $('#voice_icon').click(function () {
            if(x){
               $('#voice_control').removeClass("fa-microphone").addClass("fa-microphone-slash")
               x = false;
           }
           else{
               $('#voice_control').addClass("fa-microphone").removeClass("fa-microphone-slash")
               x = true;
           }
            $('#mic').html("<i class='fa fa-spinner fa-pulse fa-1x fa-fw'></i>");
        });
    </script>

单击jquery

4 个答案: