Skip to main content
adicionou 59 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Você podeJá que você deseja que o fundo do botão fique vermelho, por que não usar a classe .btn-danger nativa do próprio Bootstrap? (veja a lista de classes de botões).

Basta adicioná-la no botão clicado e remover dos outros. Agora, você pode capturar o clique pela classe .bot-click através do próprio jQuery: sem ter que incluir em cada botão um evento de clique para enviar o id do botão para uma função. Seu código ficará muito mais enxuto e eficiente.

$(document).ready(function(){
   $(".bot-click").click(function(){
      $(".bot-click")
      .removeClass("btn-danger"); // remove a classe de todos
      $(this)
      .addClass("btn-danger"); // adiciona a classe ao botão clicado
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">
   <div class="row">
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="E" value="Red">CASA FECHADA</button>
      </div>
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="D" value="Red">ENDEREÇO NÃO LOCALIZADO</button>
      </div>
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="G">CLIENTE REAGENDOU</button>
      </div>
   </div>
</div>

Você pode usar a classe .btn-danger nativa do próprio Bootstrap (veja a lista de classes de botões).

Basta adicioná-la no botão clicado e remover dos outros. Agora, você pode capturar o clique pela classe .bot-click através do próprio jQuery:

$(document).ready(function(){
   $(".bot-click").click(function(){
      $(".bot-click")
      .removeClass("btn-danger"); // remove a classe de todos
      $(this)
      .addClass("btn-danger"); // adiciona a classe ao botão clicado
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">
   <div class="row">
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="E" value="Red">CASA FECHADA</button>
      </div>
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="D" value="Red">ENDEREÇO NÃO LOCALIZADO</button>
      </div>
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="G">CLIENTE REAGENDOU</button>
      </div>
   </div>
</div>

Já que você deseja que o fundo do botão fique vermelho, por que não usar a classe .btn-danger nativa do próprio Bootstrap? (veja a lista de classes de botões).

Basta adicioná-la no botão clicado e remover dos outros. Agora, você pode capturar o clique pela classe .bot-click através do próprio jQuery sem ter que incluir em cada botão um evento de clique para enviar o id do botão para uma função. Seu código ficará muito mais enxuto e eficiente.

$(document).ready(function(){
   $(".bot-click").click(function(){
      $(".bot-click")
      .removeClass("btn-danger"); // remove a classe de todos
      $(this)
      .addClass("btn-danger"); // adiciona a classe ao botão clicado
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">
   <div class="row">
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="E" value="Red">CASA FECHADA</button>
      </div>
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="D" value="Red">ENDEREÇO NÃO LOCALIZADO</button>
      </div>
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="G">CLIENTE REAGENDOU</button>
      </div>
   </div>
</div>

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Você pode usar a classe .btn-danger nativa do próprio Bootstrap (veja a lista de classes de botões).

Basta adicioná-la no botão clicado e remover dos outros. Agora, você pode capturar o clique pela classe .bot-click através do próprio jQuery:

$(document).ready(function(){
   $(".bot-click").click(function(){
      $(".bot-click")
      .removeClass("btn-danger"); // remove a classe de todos
      $(this)
      .addClass("btn-danger"); // adiciona a classe ao botão clicado
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="container">
   <div class="row">
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="E" value="Red">CASA FECHADA</button>
      </div>
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="D" value="Red">ENDEREÇO NÃO LOCALIZADO</button>
      </div>
      <div class="col-sm">
         <button type="button" class="btn btn-primary bot-click" id="G">CLIENTE REAGENDOU</button>
      </div>
   </div>
</div>