0
128
VisualizaçõesJavaScript aumenta o disminuye el número haciendo clic
Este es mi código Html:
<li> <a href="#" class="likelink"> <span class="heart"> <i class="fa fa-heart-o fa-lg like"></i> <i class=" fa fa-heart fa-lg like"> </i> <span class="point">0</span>Like</span> </a> </li> 
no escribí código css
$(".fa.fa-heart.like").css("display", "none");Si el usuario hace clic en la letra o el corazón, el cero debería convertirse en uno. Si el usuario vuelve a hacer clic en el texto o en el corazón, el uno debería convertirse en cero. ¿Cómo puedo hacer eso? Intenté esto pero no funcionó.
Este es mi JS:
$(".fa.fa-heart.like").css("display", "none"); var like = parseInt($(".point").text()) + 1; var flag = true; var timeline1 = gsap.timeline({ repeatDelay: 0.1, paused: true }); timeline1.to(".likelink", { duration: 0.7, width: 50, ease: Back.easeIn }) .to(".point", { duration: 0.2, opacity: 0, fontSize: 0 }, "-=0.7")//sayı .to(".fa.fa-heart-o.like", { duration: 0.4, display: "none" }, "-=0.5")//kalp .to(".fa.fa-heart.like", { duration: 0.1, display: "inline-block" }, "-=0.1") .to(".likelink", { duration: 0.7, width: 170 }); $(".likelink").click(function () { event.stopPropagation(); flag ? timeline1.play() : timeline1.progress(0).pause(); flag = !flag; });1 Respostas
Responde à pergunta0
Ya tienes un código que obtiene el número actual de me gusta: var like = parseInt($(".point").text()) + 1;
Sin embargo, actualmente no está haciendo nada con la variable like . Debe actualizar el HTML con el valor actualizado. Puede hacer esto pasando el valor like al mismo método de text jQuery que está utilizando para obtener la variable: $(".point").text(like);
Querrá hacer esto dentro del controlador de clics (es decir, la función que se ejecuta cuando el usuario hace clic en un elemento con la clase likelink ). Sin embargo, por el momento solo lo cambias una vez. Desea cambiarlo cada vez que se hace clic en el elemento, por lo que necesita que el código esté dentro de ese controlador de clic.
También desea realizar un seguimiento de si el usuario ya ha hecho clic en el elemento o no. Tiene una flag de marca que supongo que tiene la intención de usar para este propósito, pero no está actualizando su valor dentro del controlador de clics. Debe negarlo cada vez que el usuario haga clic. El valor actual de la flag debe determinar si agrega o resta 1 a la variable like .
Simplifiqué su código para centrarme en el problema principal y agregué código en el controlador de clics para actualizar el flag y mostrar el nuevo valor de like .
$(".fa.fa-heart.like").css("display", "none"); var flag = false; $(".likelink").click(function() { event.stopPropagation(); flag = !flag; var like = parseInt($(".point").text()); if (flag) { like += 1; } else { like -= 1; } $(".point").text(like); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li> <a href="#" class="likelink"> <span class="heart"> <i class="fa fa-heart-o fa-lg like"></i> <i class=" fa fa-heart fa-lg like"> </i> <span class="point">0</span>Like </span> </a> </li>