1

Eu tenho dois botoes que são criados de acordo com o que vem da api:

  <div class="col-2">                     
      <button type="button" class="btn btn-success button-ok botOk" value="${element.NUMOS}" id="${element.COD_PROD}" onClick="sim(this);">SIM</button>                     
  </div>

  <div class="col-2">
     <button type="button" class="btn btn-danger button-ok" value="${element.NUMOS}" id="${element.COD_PROD}" onClick="cance(this);">NÃO</button>
  </div>

<div class="col">
     <p class="prod">${element.PRODUTO}</p>
</div>

O COD_PROD são iguais nos botões SIM e NÃO.

O usuário final tem que clicar sim ou não, e como eu pego os dados da api, esse ${element.PRODUTO} pode vim mais de 1, então eu fiz com um forEach para ele criar outra div com os botoes e nome do produto automaticamente.

Só que quando eu clico em sim em um produto, e vou clicar em sim no outro, o botão desativa do anterior clicado e só fica o atual clicado.

Alguém pode me ajudar?

Código que faz alteração do status:

 $('button').click(function () {
                  var clicado = $(this); //captura o botao clicado
                  $('button').removeClass('ativo') // remove a classe dos demais botoes
                  clicado.addClass('ativo');// adiciona a classe ao botao alvo                
                })
8
  • poderia postar o seu código que faz a alteração dos status dos botões? 17/10/2018 às 14:27
  • @AlvaroAlves pronto, coloquei na pergunta
    – Maria
    17/10/2018 às 14:30
  • "Só que quando eu clico em sim em um produto, e vou clicar em sim no outro, o botão desativa do anterior clicado e só fica o atual clicado."... o seu problema está nesta linha: $('button').removeClass('ativo') // remove a classe dos demais botoes 17/10/2018 às 14:31
  • Isso, mas tentei de varias outras formas e nao consigo resolver isso
    – Maria
    17/10/2018 às 14:33
  • 1
    vamos ver se eu entendi: 1 - Você clica em ok em um botão, ele adiciona a classe 'ativo'; 2 - Você clica em ok em outro botão o anterior deve ficar com a classe "ativo" 17/10/2018 às 14:35

1 Resposta 1

2

Quando ele chama essa linha:

$('button').removeClass('ativo') // remove a classe dos demais botoes

Ele desativa todo mundo, imagino que a intenção seja remover o "SIM" caso tu clique no "NÃO" do mesmo produto. Se todo aquele bloco html que tu colocou na pergunta para um produto estiver dentro de uma tag html que englobe cada produto, tu consegue fazer...

clicado.parent().parent().find('button').removeClass('ativo') // remove a classe dos demais botoes

Fiz um fiddle pra demonstrar!

2
  • Quando clica no outro nao ta removendo a anterior, ta ficando com SIM e NÃO ativo
    – Maria
    17/10/2018 às 14:44
  • Atualizei, mas usando a linha que comentei aqui funciona
    – evandrobm
    17/10/2018 às 14:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .