1
votes

Basculer la classe de bouton modifiée

Je veux créer un bouton bascule où changera la classe du bouton de class = "fa fa-toggle-off" à class = "fa fa-toggle-on" lorsque vous cliquez dessus.

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

Je crée le javascript ci-dessous, mais il a changé le bouton style = "display: none" au lieu de changer sa classe.

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

javascript jquery html

5 commentaires

Êtes-vous sûr qu'il n'y a pas d'autres événements qui se déclenchent en même temps?

Le .toggle () de jQuery ne modifie-t-il pas réellement la visibilité (via l'attribut CSS display ) des éléments et donc la cause de ce comportement?

En fait, le bouton est utilisé pour basculer la ligne enfant de la table. Et je veux changer l'icône du bouton bascule lorsque vous cliquez dessus

api.jquery.com/toggle-event

Dans le code donné, vous configurez un écouteur chaque fois qu'un bouton est cliqué; c'est manifestement faux. Ce que vous devez réellement utiliser est api.jquery.com/toggleclass

3 Réponses :

1
votes

Vous pouvez également utiliser .toggleClass pour ajouter ou supprimer une classe.

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

.fa-toggle-off {
  color: red;
}

.fa-toggle-on {
  color: blue;
}

.btn-default {
  display: block;
  width: 200px;
  height: 50px;
}

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

0 commentaires

2
votes

Voilà, j'ai utilisé toggleClass ( http: //api.jquery .com / toggleclass / ) pour basculer la classe lorsque vous cliquez sur votre bouton, cela désactivera cette classe fa-toggle-off et activera cette classe fa-toggle- sur sur clic ( https://api.jquery.com/click/ ) et vice versa.

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

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

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

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

Attention, dans votre code vous vérifiez si #change est cliqué, le bouton a l'attribut ID #btn . J'aimerais vous aider.

0 commentaires

0
votes

Vous pouvez vérifier si une classe on / off existe, puis supprimer la classe existante et ajouter une nouvelle classe comme code ci-dessous:

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

J'espère que cela vous aidera.

0 commentaires