2

Como adicionar uma classe no botão da paleta que eu clicar em "curtir"?

Por exemplo, eu tenho várias paletas de cores, mas quando clico em curtir, todos os botões recebem a classe .red, eu queria que apenas no que eu cliquei recebesse a classe:

Meu HTML:

<form method="post" id="like">
    <div class="form-group">
        <input type="hidden" name="id" value="<?=$row->id?>" class="form-control">
    </div>
    <div class="form-group">
        <input type="hidden" name="url" value="<?=Url::urlBase('palette/ajax/like')?>" class="form-control">
    </div>
    <button type="submit" name="submit" class="btn btn-light btn-sm">
        <i class="fas fa-heart"></i> <?=$row->likes?>
    </button>
</form>

O meu código ajax:

$('form#like').submit(function (e) {
    e.preventDefault();

    $.ajax({
        type: 'POST',
        url: $('#like input[name=url]').val(),
        data: $(this).serialize(),
        dataType: 'json',
        success: function (response) {
            if (response.success) {
                $('#like button[name=submit]').addClass('red')
            }
        }
    });
});

E aproveitando o tópico, gostaria de saber também como posso manter a classe red ativa mesmo se der reload na página? Já que eu não estou utilizando um sistema de login, aqui todos que entrarem no site podem dar os likes. Futuramente irei fazer pra descurtir.

1
  • Qual o problema da pergunta?
    – Max Fly
    Commented 20/02/2020 às 22:27

1 Resposta 1

5

Vê se te ajuda:

$(document).on("click", ".botao-curtir", function(e) {
  //e.preventDefault();

  $(this).addClass('red');

});
<form method="post" id="like">
  <div class="form-group">
    <input type="hidden" name="id" value="<?=$row->id?>" class="form-control">
  </div>
  <div class="form-group">
    <input type="hidden" name="url" value="<?=Url::urlBase('palette/ajax/like')?>" class="form-control">
  </div>
  <button type="submit" name="submit" class="btn btn-light btn-sm botao-curtir">
        <i class="fas fa-heart"></i> <?=$row->likes?>
    </button>
</form>

  • Se for de acordo com seu código, você pode adicionar uma classe ou um id no seu botão submit e, no retorno do AJAX, adicionar essa classe 'red' no botão, tendo como referência desse botão a classe ou ID que você deu a ele. Veja:

$('form#like').submit(function(e) {
  e.preventDefault();

  $.ajax({
    type: 'POST',
    url: $('#like input[name=url]').val(),
    data: $(this).serialize(),
    dataType: 'json',
    success: function(response) {
      if (response.success) {
        $('.botao-like').addClass('red')
      }
    }
  });
});

  • Para identificar um botão, você não precisa utilizar o atributo name (Geralmente, o atributo name serve para representar uma coleção de valores, enviados através de um formulário, para o servidor), você pode utilizar ID ou Classe.
10
  • Ficou do mesmo jeito aoskoask, quando clica adiciona em todas os botões, no caso tem várias paletas, veja :i.stack.imgur.com/k2gmH.png
    – Max Fly
    Commented 20/02/2020 às 22:56
  • Você colocou a classe botao-like no button ? Commented 20/02/2020 às 22:56
  • Sim, coloquei..
    – Max Fly
    Commented 20/02/2020 às 22:57
  • Está sendo apresentado algum erro no DevTools ? Commented 20/02/2020 às 22:59
  • Nenhum... Funcionou, só que do mesmo jeito... todos os botões acabam mudando, gostaria que só o que fosse clicado mudasse
    – Max Fly
    Commented 20/02/2020 às 22:59

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 .