3
votes

Comment changer les couleurs des boutons lors d'un clic avec plusieurs boutons

J'ai un bouton qui doit être actif lorsque la page se charge avec deux autres boutons qui ne sont pas actifs. Lorsque je clique sur un bouton inactif, je dois supprimer la classe active de l'autre bouton et l'ajouter au bouton cliqué.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12 col-xs-12" style="text-align: center;">
    <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
    <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
    <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
  </div>
</div>

.featuredBtn.active {
  background-color: #bf9471;
  color: white;
}

.featuredBtn {
  width: 250px;
  height: 50px;
  color: #8c8c8c;
  font-weight: 700;
  background-color: #f4efeb;
  border: none;
  letter-spacing: 2px;
  outline: none;
}

$("button").click(function () {
      clicked = true;
      if (clicked) {
        $(this).toggleClass('active');
        clicked = true;
      } else {
        $(this).removeClass('active');
        clicked = false;
      }
    });

Un bouton avec la classe .active doit être supprimé lorsqu'un nouveau bouton est cliqué. Le nouveau bouton cliqué devrait alors prendre la classe .active.

javascript jquery html css

1 commentaires

Quel est l'intérêt d'inclure jQuery si vous ne comptez pas l'utiliser?

5 Réponses :

3
votes

Le code ne fonctionne pas car (cliqué) sera toujours vrai - il est mis à vrai chaque fois que la fonction s'exécute, pour chaque bouton. Si vous voulez vérifier que le bouton cliqué est actif, vous pouvez définir la variable clicked = this.getAttribute ('class'). Includes ('active') . Si le bouton a la classe active , cliqué sera vrai.

Cependant, nous n'avons même pas vraiment besoin de vérifier si le bouton cliqué est actif ou non - nous pouvons simplement supprimer la classe active de tous les boutons, puis la définir sur celle qui vient d'être cliquée à l'aide du sélecteur $ (this) , ci-dessous:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12 col-xs-12" style="text-align: center;">
    <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
    <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
    <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
  </div>
</div>

.featuredBtn.active {
  background-color: #bf9471;
  color: white;
}

.featuredBtn {
  width: 250px;
  height: 50px;
  color: #8c8c8c;
  font-weight: 700;
  background-color: #f4efeb;
  border: none;
  letter-spacing: 2px;
  outline: none;
}

$("button").click(function() {
   $("button").removeClass("active");
   $(this).addClass("active");
});

0 commentaires

0
votes

J'espère que cela résoudra votre travail, vérifiez-le; il suffit de ajouter et supprimer la classe

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="row">
      <div class="col-lg-12 col-xs-12" style="text-align: center;">
        <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
        <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
        <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
      </div>
    </div>

   .featuredBtn.active {
      background-color: #bf9471;
      color: white;
    }

    .featuredBtn {
      width: 250px;
      height: 50px;
      color: #8c8c8c;
      font-weight: 700;
      background-color: #f4efeb;
      border: none;
      letter-spacing: 2px;
      outline: none;
    }

    $("button").click(function() {
       $("button").removeClass("active");
       $(this).addClass("active");
    });

j'espère que cela vous aidera à résoudre votre problème

0 commentaires

1
votes

Je suggère de spécifier l'élément plus précisément en utilisant le nom de classe "vedetteBtn". Cela évitera de lier un événement à tous les boutons de la page

$(".featuredBtn").click(function() {
   $("button.active").removeClass("active");
   $(this).addClass("active");
});

2 commentaires

Bienvenue dans StackOverflow. Veuillez consulter: stackoverflow.com/help/how-to-answer

Veuillez développer votre réponse et donner des explications supplémentaires

0
votes

La seule chose supplémentaire que j'ajouterais à l'un d'entre eux est de faire d'abord une vérification pour la classe active . Tout le reste est principalement personnel car il y a plusieurs façons de le faire et les réponses ici semblent l'avoir couvert

$('.featuredBtn').on('click', function() {
    let featureBtn = $('.featuredBtn');

    if(featureBtn.hasClass('active')) {
        featureBtn.removeClass('active');
        $(this).addClass('active');
    }
});

0 commentaires

0
votes

Vous pouvez utiliser 'hasClass' pour résoudre celui-ci.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12 col-xs-12" style="text-align: center;">
    <button type="button" class="featuredBtn active" id="btnOne">BUTTON ONE</button>
    <button type="button" class="featuredBtn" id="btnTwo">BUTTON TWO</button>
    <button type="button" class="featuredBtn" id="btnThree">BUTTON THREE</button>
  </div>
</div>

.featuredBtn.active {
  background-color: #bf9471;
  color: white;
}

.featuredBtn {
  width: 250px;
  height: 50px;
  color: #8c8c8c;
  font-weight: 700;
  background-color: #f4efeb;
  border: none;
  letter-spacing: 2px;
  outline: none;
}

$("button").click(function() {
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
  } else {
    $(".active").removeClass("active");
    $(this).addClass('active');
  }
});

0 commentaires