JavaScript通过点击增加或减少数字[关闭]答案

【问题标题】：JavaScript increase or decrease number by clicking [closed]JavaScript通过点击增加或减少数字[关闭]
【发布时间】：2021-12-23 21:24:09
【问题描述】：

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

【问题讨论】：

到目前为止，您自己尝试过什么来解决这个问题？
这里的标签有什么相关性？为什么c#？为什么asp.net？为什么css？
因为使用这个标签
@Andreas 我为你写的
注意样本可以转换为snippet

标签： javascript html css gsap

【解决方案1】：

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

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

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

您还想跟踪用户是否已经点击了该元素。您有一个 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>

【讨论】：