Toggle changed button class

问题: I want to create a toggle button where will change button class from class="fa fa-toggle-off" to class="fa fa-toggle-on" when clicked. <button class="btn btn-default"...

问题:

I want to create a toggle button where will change button class from class="fa fa-toggle-off" to class="fa fa-toggle-on" when clicked.

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

I create the javascript below, however it changed the button style="display:none" instead change its class.

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

回答1:

There you go, I used toggleClass (http://api.jquery.com/toggleclass/) function to toggle the class when you click your button, it'll disabled this class fa-toggle-off and activate this class fa-toggle-on on click (https://api.jquery.com/click/) and vice versa.

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

Beware, in your code you're checking if #change is clicked, the button got #btn ID attribute. Wish I helped you.


回答2:

You can use .toggleClass to add or remove class alternatively

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


回答3:

You can check if on/off class exist and then can remove existing class & add new class as below code:

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

Hope it helps you.

  • 发表于 2019-03-13 11:55
  • 阅读 ( 186 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除