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");

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

这是我的 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 class 的元素时运行的函数）。但是，目前您只能更改一次。您希望每次单击该元素时都更改它，因此您需要将代码放在该单击处理程序中。

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

JavaScript 通过点击增加或减少数量

JavaScript increase or decrease number by clicking

html

javascript

css

gsap