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>