JavaScript 点击增减数字

Question

这是我的 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>

我没有写 css 代码

  $(".fa.fa-heart.like").css("display", "none");

如果用户点击字母或心形，零应该变成一。 如果用户再次单击文本或心脏，则 1 应变为 0。 我怎样才能做到这一点？ 我试过这个，但没有用。

这是我的 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;
});

Answer 1

您已经有一些代码可以获取当前的点赞数： var like = parseInt($(".point").text()) + 1;

但是，您目前没有对like变量做任何事情。 您需要使用更新后的值更新 HTML。 您可以通过将like值传递到您用于获取变量的相同 jQuery text方法来做到这一点： $(".point").text(like);

您将希望在单击处理程序中执行此操作（即，当用户单击具有likelink类的元素时运行的 function）。 但是，目前您只能更改一次。 您想在每次单击元素时更改它，因此您需要将代码放在该单击处理程序中。

您还想跟踪用户是否已经单击了该元素。 您有一个flag变量，我假设您打算将其用于此目的，但您没有在点击处理程序中更新它的值。 每次用户单击时，您都需要取消它。 flag的当前值应确定您是对like变量加还是减 1。

我已经简化了您的代码以专注于核心问题，并在点击处理程序中添加了代码以更新flag并显示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>