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，但是它更改了按钮样式=“ 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 来添加或删除类

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

.fa-toggle-off {
  color: red;
}

.fa-toggle-on {
  color: blue;
}

.btn-default {
  display: block;
  width: 200px;
  height: 50px;
}

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

Answer 2

您去了，我用toggleClass（http://api.jquery.com/toggleclass/）函数在您单击按钮时切换了类，它将禁用该类fa-toggle-off并激活该类{{1 }} （https://api.jquery.com/click/），反之亦然。

fa-toggle-on

$(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 ID属性。希望我能帮到你。

Answer 3

您可以检查是否存在开/关类，然后可以删除现有类并添加新类，如下代码：

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

        if ($("#change").hasClass("fa-toggle-off")) 
        {
            $('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
        } else {
            $('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
        });
    });
});

希望它对您有帮助。

切换更改的按钮类

3 个答案: