2

Gostaria de alterar o texto do botão após a confirmação leitura,contudo como tenho varios elementos iguais no DOM,com faço alterar apenas o texto do botão em questão.

<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="DEI-DAF020.001.000 - DEI - TI SUPORTE.pdf" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="teste1" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>

4 Respostas 4

2

Segue um exemplo!

Após capturar o elemento clicado pela class, basta você usar this, para indicar que deseja mudar o elemento clicado!

$(".btn").click(function(e){
  $(this).text("mudei");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="DEI-DAF020.001.000 - DEI - TI SUPORTE.pdf" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="teste1" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button></td>

2
  • 1
    Pensei nessa forma de implementação,contudo estou desenvolvendo para no ERP Fluig da Totvs ,que suas especificação.Sem falar que evento click iria capturar o click do btn do modal,pois tem btn que abre modal que outro btn confirmação.No caso queria alterar texto do 1º botão.
    – user68901
    24/02/2019 às 10:04
  • é só um exemplo, você pode adicionar uma class especifica para os btns do modal, assim o click ira funcionar sem problema!
    – Lodi
    25/02/2019 às 18:28
1

E se fosse feito desta maneira? Você só colocaria o evento de onClick no próprio botão que você quer ter essa confirmação. E até poderia passar alguma outra informação para fazer um if, caso fosse necessário.

confirmaLeitura = (elemento)=>{
  elemento.textContent = "Leitura Confirmada";
}
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="DEI-DAF020.001.000 - DEI - TI SUPORTE.pdf" type="button" class="btn btn-warning btn-xs 189738" onClick="confirmaLeitura(this)">Confirma Leitura</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Este botão não terá confirmação</button></td>
<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="teste1" type="button" class="btn btn-warning btn-xs 189738" onClick="confirmaLeitura(this)">Confirma Leitura</button></td>

1
  • Tentar ser mais claro,ambas sugestão de implementação não me atende,pois o fluxo e o seguinte;tenho um botão aonde abre o um modal com um termo,quando usuário clicar no botão de confirmação do modal,ai sim alterar o texto do botão que exibe o modal.
    – user68901
    25/02/2019 às 11:47
1

Eu prefiro essa abordagem! Qualquer dúvida grita ai. Fica com Deus!

        const btn = document.querySelectorAll('#dados')

        btn.forEach(x => {
            x.addEventListener('click', () => x.innerHTML = "Leitura Confirmada")
        })
        <td class="btnDoc">
            <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="DEI-DAF020.001.000 - DEI - TI SUPORTE.pdf" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button>
        </td>
        <td class="btnDoc">
            <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="testte" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button>
        </td>
        <td class="btnDoc">
            <button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="teste1" type="button" class="btn btn-warning btn-xs 189738">Confirma Leitura</button>
        </td>

0

<!DOCTYPE html>
<meta http-equiv="Content-Language" content="pt-br">
<html></br><center> 
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<td class="btnDoc"><button id="dados" data-confirm="" data-iddocumento="189738" data-descricao="teste1" type="button" class="btn btn-warning btn-xs 189738">Mudar de nome</button></td>
    <script type="text/javascript">
        $(".btn").click(function copiar(){
  $(this).text("Nome mudado");
});
    </script></center>
</body>
</html>

1
  • Sua resposta pode ser melhorada adicionando informações fundamentais. Basta editar para adicionar mais detalhes, como citações ou documentação para que outras pessoas possam confirmar que sua resposta está correta. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    8/05/2022 às 21:36

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