jquery Botão de like jQuery

[kvinsampaio 0]

Gente, podem me ajudar?

Então... Gostaria de pegar certas informações ao clicar num botão, alias, são vários deles e cada um com certa informação, veja:

<div class="post">
	<form>
		<button id="bolo" class="heart" name="id" data-id="49" uk-icon="icon: heart"></button>
	</form>
	<div class="quantLikes">
		12
	</div>
</div>
<div class="post">
	<form>
		<button id="carne" class="heart" name="id" data-id="50" uk-icon="icon: heart"></button>
	</form>
	<div class="quantLikes">
		12
	</div>
</div>
<div class="post">
	<form>
		<button id="laranja" class="heart" name="id" data-id="51" uk-icon="icon: heart"></button>
	</form>
	<div class="quantLikes">
		12
	</div>
</div>

E um jQuerizinho pra pega-las:

$( 'button[name="id"]' ).click(function(){
  var that = $(this);
  var valId = that.data('id');
  var token = $(this).attr('id');
  alert(token);
});

Porém, estão me retornando sempre a mesma informação que está no ID...

O que posso fazer?

[wootzor 103]

Experimenta assim:

$(document).ready(function() {
  $('button[name="id"]').click(function() {
    var valId = $(this).data('id');
    var token = $(this).attr('id');
    $(this).next(".quantLikes").html(parseInt($(this).next(".quantLikes").html()) + 1);
    //alert(token);
  });
});

 

Exemplo.

[Sergio S. F. Pereira 39]

Não entendi o que você quer fazer mas você pode pegar o que quiser do elemento e atribuir a uma variável.

$( 'button[name="id"]' ).click(function(){
  event.preventDefault();
  var id_e = $(this).attr('id');
  var class_e = $(this).attr('class');
  var name_e = $(this).attr('name');
  var data_id_e = $(this).data('id');
  var uk_icon_e = $(this).attr('uk-icon');
  console.log("ID:"+id_e+", Class:"+class_e+", Name:"+name_e+", Data-id:"+data_id_e+", Uk-icon:"+uk_icon_e);
});

 

O exemplo acima clicando em cada um dos botões vai exibir o seguinte resultado no console:

ID:bolo, Class:heart, Name:id, Data-id:49, Uk-icon:icon: heart
ID:carne, Class:heart, Name:id, Data-id:50, Uk-icon:icon: heart
ID:laranja, Class:heart, Name:id, Data-id:51, Uk-icon:icon: heart

[kvinsampaio 0]

2 horas atrás, wootzor disse:

Experimenta assim:

$(document).ready(function() {
  $('button[name="id"]').click(function() {
    var valId = $(this).data('id');
    var token = $(this).attr('id');
    $(this).next(".quantLikes").html(parseInt($(this).next(".quantLikes").html()) + 1);
    //alert(token);
  });
});

 

Exemplo.

 

Sinceramente o teu exemplo foi o caminho para a solução... Agradeço muito mesmo pela ajuda e continue ajudando o pessoal novato como eu HAHAHA!

 

Solução:

<div class="post">
  <form method="post">
    <?php
      $readHeart = read('likes',"WHERE userId='$user[id]' AND postId='$post[id]'");
      if($readHeart){
      	$hc = 'redHeart';
      } else {
      	$hc = '';
      }
    ?>
    <button id="<?= base64_encode($user['id'].'&'.$post['id']); ?>" class="heart <?= $hc; ?>" name="id" data-id="<?= $post['id']; ?>" uk-icon="icon: heart"></button>
  </form>
</div>

E o jQuery usado na comunicação:

	$('button[name="id"]').click(function() {
		var valId = $(this).data('id');
		var token = $(this).attr('id');
		$(this).prop('disabled',true);
		$.ajax({
			url: ' caminho da funcionalidade ',
			data : {
				action : "likes",
				id : valId,
				token : token
			},
			type: 'POST',
			success : (response) => {
				var str = response;
				var n = str.split('|');
				if(n[1]=='add'){
					$(".heart").addClass("redHeart");
					$('#'+valId).html(n[0]);
				} else {
					$(".heart").removeClass("redHeart");
					$('#'+valId).html(n[0]);
				}
				$(this).prop('disabled',false);
			},
			error : () => {
				$(this).prop('disabled',false);
			}
		});
		return false;
	});