javascript - 切换已更改的按钮类

Question

我想创建一个切换按钮，单击时会将按钮类从 class="fa fa-toggle-off"更改为 class="fa fa-toggle-on"。

<button class="btn btn-default" id="btn" name="btn"><i id="change" class="fa fa-toggle-off"></i></button>

我在下面创建了 javascript，但是它更改了按钮 style="display:none"而不是更改了它的类。

       $(function() {
          $('#btn').click(function(e) {
            e.preventDefault();

            var display = true,
                image   = 'details_close.png';

            if ($('.td1:visible').length == $('.td1').length) { 
              display = false;
              image   = 'details_open.png';
            }

            $('.td1').toggle(display);

            $("#change").toggle(function() 
            {
                    $('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
            }, function() {
                    $('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
            });
          });
        });

Answer 1

好了，我使用 toggleClass ( http://api.jquery.com/toggleclass/ ) 函数在您单击按钮时切换类，它会禁用此类 fa-toggle-off 并在点击时激活此类 fa-toggle-on ( https://api.jquery.com/click/ )，反之亦然。

$(document).ready(function(){
  $("#btn").click(function() {
     $("#change").toggleClass("fa-toggle-off fa-toggle-on");
  });
});

.fa-toggle-off {
  background-color: #F00;
}

.fa-toggle-on {
  background-color: #0F0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-default" id="btn" name="btn">
  Button <i id="change" class="fa fa-toggle-off">AAA</i>
</button>

请注意，在您的代码中，您正在检查是否单击了 #change，按钮是否具有 #btn ID 属性。 希望我能帮到你。