3

Tenho varios cards em uma pagina e cada card tem uma opção de curtida igual do facebook, quando clico na imagem o contador aumenta 1, porem esta contando em todos os cards e não somente no que eu cliquei e tambem cada vez que eu clico sobe um gostaria que se o usuário clicar uma vez ele aumenta um se clicar de novo ele diminui um igual do facebook like dislike.

Segue um exemplo do que tenho hoje

var count = 0;

$(".click").click(function() {
  count++;
  $(".click").css('opacity', "0.7");
  $(".like").html(count + "Curtidas");
  $(this).off(event);
});
.click {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class='click'>Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click'>Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click'>Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

4
  • Quanto tempo você já gastou fazendo isso? Commented 5/01/2016 às 12:10
  • @PauloHDSousa é importante isso? Se sim, não gastei muito tempo não na vdd no momento não é algo tão serio mass como comecei a mexer gostaria de saber se é possível só com JS fazer isso.
    – user27585
    Commented 5/01/2016 às 12:11
  • É possível sim fazer só com JS. Commented 5/01/2016 às 12:12
  • @PauloHDSousa obrigado, respondeu uma das minhas dúvidas.
    – user27585
    Commented 5/01/2016 às 12:13

2 Respostas 2

3

O problema é que você está perdendo a referência para o botão que está clicando. Isso aqui $(".like").html(count + "Curtidas"); vai pegar todos os elementos com a classe .like.

Para seu código funcionar vai ter que usar o $(this) como referência. E para o efeito de voltar a 0 basta fazer um if.

Segue o exemplo:

$(function() {
    $('.like').on('click', function() {
        $(this).next('.likes').find('span').text(function() {
            if (parseInt($(this).text()) === 0) {
                return parseInt($(this).text() + 1);
            }
            else {
                return 0;
            }
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li>
      <p class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt architecto aut eligendi saepe nihil, officiis officia, est! Deserunt cupiditate voluptate necessitatibus. Aspernatur, vitae earum atque hic maxime facere sequi sint!</p>
      <button class="like">Curtir</button>
      <span class="likes"><span>0</span> curtidas</span>
    </li>
  </ul>
</div>

@Edit:

O problema é que você precisa salvar isso em algum banco de dados, não vai conseguir fazer só com JS. Ao atualizar a página vai perder todos os dados.

O mais coerente é fazer uma validação no back-end e trabalhar com requisições AJAX para inserir esses dados.

Lá você verifica a identidade do usuário e se ele já votou, caso já tenha votado retorna 0 para incrementar, do contrário incrementa mais 1.

2
  • Legal entendi, queria deixar o menos trabalhoso possível pro pessoal do back-end, vc acha que desse jeito que ta facilita para eles? Obrigado.
    – user27585
    Commented 5/01/2016 às 12:29
  • 1
    Não, esse código não tem contato nenhum com o back-end, é perigoso tratar dados no front-end. O seu código deveria fazer uma requisição para o back, e lá os dados são tratados e retornados para o front..
    – waghcwb
    Commented 5/01/2016 às 12:56
1

No evento click utilize o this para obter apenas o elemento que foi clicado. Para manipular o item que está logo abaixo, no caso o li com a classe like utilize o next. Da maneira que você fez $(".like") estava manipulando o valor para todos os itens com essa classe.

$(this).next().html(count + " Curtidas");

Também para "salvar" a quantidade de curtidas em cada item, utilize o atributo data-*, com isso poderá recuperar e incrementar o total de likes.

<li class='click' data-like-count="0">Clique</li>

Veja o exemplo funcionando:

$(".click").on('click', function() {
  var count = parseInt($(this).attr("data-like-count"));
  count++;
  $(this).css('opacity', "0.7");
  $(this).next().html(count + " Curtidas");
  $(this).off(event);
  $(this).attr("data-like-count", count);
});
.click {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li class='click' data-like-count="0">Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click' data-like-count="0">Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

<div>
  <ul>
    <li class='click' data-like-count="0">Clique</li>
    <li class='like'>0 curtidas</li>
  </ul>
</div>

1
  • Muito obrigado era isso mesmo, acho que deixando assim fica mais facil pro back-end dar continuidade depois. Mas ficou show vlww ! Obs: Alias ultima coisa, é possível em vez de aumentar o like se o usuario clicar de novo ele retirar o like? Ou isso é so via back-end vlww
    – user27585
    Commented 5/01/2016 às 12:39

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