2

Pessoal estou com uma dúvida.

Tenho um botão:

<button type="button" class="btn btn-success btn-xs" onclick="vincularContato($(this))"><span class="glyphicon glyphicon-ok"></span></button>

E duas funções, uma vincularContato e outra removerContato passando o próprio botão como parâmetro:

function removerContato(botao) {

    var tempIdContato = botao.closest("tr")
                             .find(".idContato")
                             .text();

    botao.removeClass('btn-danger');
    botao.addClass('btn-success');
    botao.html('<span class="glyphicon glyphicon-remove"></span>');
    //    botao.prop('onclick', null).off('click');
    //    botao.prop('onclick', vincularContato(botao)).off('click');

}

function vincularContato(botao) {

    var tempIdContato = botao.closest("tr")
                             .find(".idContato")
                             .text();

    botao.removeClass('btn-success');
    botao.addClass('btn-danger');
    botao.html('<span class="glyphicon glyphicon-remove"></span>');
    //    botao.prop('onclick', null).off('click');
    //    botao.prop('onclick', removerContato(botao)).off('click');

}

O que eu preciso é alterar a função do onclick do meu botão sempre que for clicado, alternando de uma função para outra.

O botão está trocando o span e a classe, mas não consigo mudar o onclick.

Comentei um dos meus testes, fiz alguns outros modos mas sem sucesso.

Poderiam me ajudar?

5 Respostas 5

3

Uma forma muito simples de resolver isso é utilizar o método .attr() em cada função, trocando o onclick:

Com jQuery

function removerContato(botao) {
  alert("vincularContato");
  botao.attr('onclick', 'vincularContato($(this));');
}

function vincularContato(botao) {
  alert("removerContato");
  botao.attr('onclick', 'removerContato($(this));');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input type="button" onclick="removerContato($(this))" value="Clique aqui">

Sem jQuery

function removerContato(botao) {
  alert("função removerContato");
  botao.setAttribute("onclick","vincularContato(this);");
}

function vincularContato(botao) {
  alert("função vincularContato");
  botao.setAttribute("onclick","removerContato(this);");
}
<input type="button" onclick="vincularContato(this)" value="Clique aqui">

3
  • Vou acrescentar meus 2 cents na sua resposta, por que era exatamente o que iria responder, só que usando js puro, sem jQuery :) Commented 14/08/2017 às 20:52
  • Caso se sinta incomodado com as alterações feitas, pode reverter a resposta para sua resposta original Commented 14/08/2017 às 20:57
  • agora sim tá bonito :)
    – user60252
    Commented 14/08/2017 às 21:08
2

Particularmente acho que é melhor você ter dois botões, um pra cada ação, e no momento que você clicar em um, oculta o outro, e assim sucessivamente, veja no exemplo:

  • .on('click', function () { ... }: atribui o evento click ao botão assim que ele for renderizado no HTML.
  • .toggle(): Alterna a visibilidade do elemento, se estiver visível oculta e se estiver oculto torna-o visível.
  • .show(): Altera a visibilidade do elemento para visível.

$('#botao1').on('click', function() {
  console.log('Evento 1');
  $(this).toggle();
  $('#botao2').show();
});

$('#botao2').on('click', function() {
  console.log('Evento 2');
  $(this).toggle();
  $('#botao1').show();
});
#botao2 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="botao1">Ação 1</button>
<button id="botao2">Ação 2</button>

4
  • ou talvez ele possa criar uma variavel e ir incrementando ela e caso a variavel % 2 retorne 1 ele faz uma coisa senao faz outra.
    – user83428
    Commented 14/08/2017 às 20:09
  • 1
    Boa ideia Pedro, amanhã irei fazer isso mesmo, não tinha pensado nisso! Haha... Valeu Commented 14/08/2017 às 20:10
  • Pode ser feito sim @ViniciusPuttiMorais, porém, você mesmo está dizendo que terá um trabalho "extra" a ser feito criar uma variavel e ir incrementando ela. Concorda? Commented 14/08/2017 às 20:13
  • realmente, na verdade depende do gosto.
    – user83428
    Commented 14/08/2017 às 20:32
2

Algo como:

var aux = true;
function acaoContato(botao) {
    aux ? removerContato(botao) : vincularContato(botao);
}

Ao final de cada uma das funções vc realiza a troca de estado do aux, e no botão chama o acaoContato.

Ou pode colocar as ações todas dentro da mesma função:

var aux = true;
function acaoContato(botao) {
    aux ? {
        // Conteúdo do removerContato
    } : {
        // Conteúdo do vincularContato
    };
}
2

Um dos truques para que isso funcione é a a função innerHTML que executa uma troca de conteúdo em uma tag “div” especificada.

Assim com javascript puro:

function removerContato(botao) {

   console.log("clicou na função removerContato");
    
   document.getElementById("dibotao").innerHTML =('<button type="button" class="btn btn-success btn-xs" onclick="vincularContato(this)"><span class="glyphicon glyphicon-ok">Vincular</span></button>');

}

function vincularContato(botao) {

   console.log("clicou na função vincularContato");

   document.getElementById("dibotao").innerHTML =('<button type="button" class="btn btn-success btn-xs" onclick="removerContato(this)"><span class="glyphicon glyphicon-ok">Remover</span></button>');

}
<div id="dibotao"><button type="button" class="btn btn-success btn-xs" onclick="vincularContato(this)"><span class="glyphicon glyphicon-ok">Vincular</span></button></div>

Assim com jquery

O método .html() substitui conteúdo

function removerContato(botao) {
  console.log("clicou na função removerContato");
  botao.parent().html('<button type="button" class="btn btn-success btn-xs" onclick="vincularContato($(this))"><span class="glyphicon glyphicon-ok">Vincular</span></button>');

}

function vincularContato(botao) {
  console.log("clicou na função vincularContato");
  botao.parent().html('<button type="button" class="btn btn-success btn-xs" onclick="removerContato($(this))"><span class="glyphicon glyphicon-ok">Remover</span></button>');

  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dibotao"><button type="button" class="btn btn-success btn-xs" onclick="vincularContato($(this))"><span class="glyphicon glyphicon-ok">Vincular</span></button></div>

1
  • @MarceloBoni, xuxu beleza
    – user60252
    Commented 14/08/2017 às 21:23
2

Particularmente procuro escrever códigos reutilizáveis, otimizados e de fácil manutenção (infelizmente nem sempre é possível!). Os benefícios são óbvios: você pode simplesmente copiar e colar em qualquer lugar que ele funcionará. Claro que devemos considerar as dependências, etc.

As soluções aqui citadas são válidas, porém sugiro que você crie um plugin pra resolver seu problema, algo simples que cuide apenas da UI e seja flexível o suficiente para você aplicar em diferentes contextos.

Escrevi rápidamente, certamente você pode melhorar.

Considere:

  • Js é uma linguagem funcional, aproveite;
  • Sempre que possível separe a logica da aplicação;
  • Códigos menores e independentes são mais fáceis de testar e manter;
  • Programe coisas que você pode reutilizar em outros projetos;

/*

index.js

Considerando que você importou o plugin, basta iniciar. Você pode 
passar duas funções que serão executadas quando tiver alteração 
no status. O contexto do this é o $(this), ou seja o 
próprio elemento,dessa forma você pode recuperar atributos, ou 
fazer qualquer coisa com o botão...
*/

$(function(){
  $('.contact').statusButton({
    enabled: function() {
      console.log('ENABLED', this.data('contact'));
    },
    disabled: function() {
      console.log('DISABLED', this.data('contact'));
    }
  });
});




/*

status-button.js

*/

(function($) {

  /**
  * statusButton
  * @param Object options
  */
  $.fn.statusButton = function(options) {


    /**
    * settings
    */
    var settings = $.extend({
      template: {
        add: {
          'class': 'btn-success',
          'icon': 'glyphicon-ok',
        },
        remove: {
          'class': 'btn-danger',
          'icon': 'glyphicon-remove',
        },
      },
      enabled: function() {},
      disabled: function() {}
    }, options);


    /**
    * changeStatus
    */
    var changeStatus = {

      enabled: function($icon) {
        this.removeClass('btn-danger').addClass('btn-success');
        this.find('.glyphicon').removeClass('glyphicon-remove').addClass('glyphicon-ok');
      },

      disabled: function ($icon) {
        this.removeClass('btn-success').addClass('btn-danger');
        this.find('.glyphicon').removeClass('glyphicon-ok').addClass('glyphicon-remove');
      }
    };


    /**
    * For each Element...
    */
    return this.each(function() {

      var status = $(this).data('status') || 'enabled';

      changeStatus[status].call($(this));

      $(this).click(function(){
        status = status === 'enabled' ? 'disabled' : 'enabled';
        changeStatus[status].call($(this));
        settings[status].call($(this));
      });
    })

  }

}(jQuery));
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<!--
index.html

Insira uma classe pra você usar no plugin. Além disso 
você pode usar o data-status="disabled" caso precise 
que inicie desabilitado.
-->

<button data-contact="100" type="button" class="btn btn-success btn-xs contact">
  <span class="glyphicon glyphicon-ok"></span>
</button>

<button data-status="disabled" data-contact="321" type="button" class="btn btn-success btn-xs contact">
  <span class="glyphicon glyphicon-ok"></span>
</button>


<button data-contact="123" type="button" class="btn btn-success btn-xs contact">
  <span class="glyphicon glyphicon-ok"></span>
</button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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 .