如何暂时将 +1 添加到 div 直到它刷新，并在第二次单击时减去 1（等等）？

Question

我的网站上有一个类似的功能。更新新号码大约需要 1 到 3 秒（由于不可避免的 sql 查询我的网站 - 不是最好的，但它有效）。

例如，如果有人喜欢它，他们就会点击竖起大拇指。 div 然后更新为新号码。

如果它有3个赞，那么当你点赞的时候，它就会有4个赞。如果你再次点击，它又有 3 个赞。永远重复。

javascript 的唯一目的是为用户提供即时满足，如果他们不注意，可能不确定它是否有效，尤其是在需要超过 1 秒的时候。

我的想法是，如果我可以简单地使用 jquery 来临时显示新号码，直到我的网站重写 div 以显示更新后的号码，它将为我提供此功能需要挺好的

这是我的想法。请帮我让它工作。

var likenum = $(".likenum").val(); // get the number inside the div
var newLikeNum = parseInt(likenum) + 1; // make sure the text is an integer for math functions, then do math and assign to a var
$(".likenum").val(newLikeNum); // refresh div with the new number

有几个问题。

如何运行一次，如果再次点击，反而是减号？
(另外还有一些问题:
它需要为所有未来的功能保留原始的 likenum，而不是获得一个新的。这样，如果我的站点刷新 div，jquery 就不会关注它。它知道原始数字，现在它对原始数字 +1 或 -1。

所以让我们以这个例子为我想要的。

<div class="likediv">3</div> <!-- original div on page load -->

x***click***x（假装我点击了大拇指）

<div class="likediv">4</div> <!-- updated number -->

x***click***x（假装我再次点击了大拇指）

<div class="likediv">3</div> <!-- updated number -->

x***click***x（假装我再次点击了大拇指）

<div class="likediv">4</div> <!-- updated number -->

x***click***x（假装我再次点击了大拇指）

<div class="likediv">3</div> <!-- updated number -->

x***click***x（假装我再次点击了大拇指）

<div class="likediv">4</div> <!-- updated number -->

我想你明白了。

那我该怎么做呢？看看我上面的入门代码，我想我已经接近了。

哦，是的，还有一件事。页面上有很多点赞按钮，不只是一个。所以它需要存储和记住任何 divs。因为我们是点赞，每页有很多条。

为此，请只用jquery。

编辑：更新：

所以，这是行不通的，@VIDesign 的回答，但我明白为什么了。事实上，这就是 HTML 实际的样子。 （请注意，我还将新的工作 data-value 作为@VIDesign 回答的一部分）

<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>

好吧，显然为什么它不起作用是因为当你点击时，你实际上点击了 .likediv，但是 data-value="3" 必须进入嵌套在 [= 内的跨度内121=] 并且不能被触摸。

那么，我们如何触发@VIDesign 的答案，除了在跨度外的 div 上滑动时触发操作，当 span 包含数字和 data-value?

我希望这是清楚的。很抱歉最初没有指定这个，直到现在我才知道。

因此，我们需要更改下面的代码以使用上面的代码：

$(".likediv").click(function(){

    // Use the data-value as the constant to calculate with
    const actualValue = $(this).data("value");
    // Set a max value
    const maxValue = actualValue + 1;
    // Get the value the user sees
    const userValue = parseInt($(this).html());

    // create an empty variable for the new value to display
    let newValue;

    // If the value the user sees is equal to the max value
    if(userValue == maxValue){
        // then subtract one
        newValue = maxValue - 1;
    }else{
        // else add one
        newValue = actualValue + 1;
    }
    // Display the new value to the user
    $(this).html(newValue); 

});

更新 2：我试过了，但没用：

$(".likediv").click(function(){

    // Use the data-value as the constant to calculate with
    const actualValue = $(".dynamic-span").data("value");
    // Set a max value
    const maxValue = actualValue + 1;
    // Get the value the user sees
    const userValue = parseInt($(".dynamic-span").html());

    // create an empty variable for the new value to display
    let newValue;

    // If the value the user sees is equal to the max value
    if(userValue == maxValue){
        // then subtract one
        newValue = maxValue - 1;
    }else{
        // else add one
        newValue = actualValue + 1;
    }
    // Display the new value to the user
    $(".dynamic-span").html(newValue); 

});

注意：我遇到的唯一问题是 点击后在前端向用户显示的速度。

我不试图对数据库进行任何保存，我不想尝试从数据库中获取任何值，这将是多余的（因为它已经在后端 php 的其他代码中成功发生）。

这只是更新 显示数字可见速度的快速技巧。请注意，当后端的php代码更新div时（通常是1到3秒），它会覆盖当前div中的任何内容。

此外，根据设计，此处所做的任何操作都应该在页面重新加载时丢失。这只是前端显示黑客，而不是后端任何代码的实际更新。

Answer 1

我的答案是在范围内创建一个全局变量dec，告诉你是递增还是递减

var dec = false;
$("#myButton").click(function(){
  dec = !dec;
});
if(!dec)
 $(".likenum").val(parseInt($(".likenum").val()) + 1);
else
  $(".likenum").val(parseInt($(".likenum").val()) - 1);

Answer 2

Fiddle https://jsfiddle.net/videsignz/n3e5u7bt/34/ 这是使用数据属性的示例。 data-value 将从数据库中加载，您将以此开始。

<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>
<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>
<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>
<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>
<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>
<div class="likediv">
    <span class="dynamic-span" data-value="3">3</span>
</div>

然后像这样处理button/div点击函数内的限制...

$(".likediv").on("click", function(){

    const span = $(this).find("span.dynamic-span");
    // Use the data-value as the constant to calculate with
    const actualValue = span.data("value");
    // Set a max value
    const maxValue = actualValue + 1;
    // Get the value the user sees
    const userValue = parseInt(span.html());

    // create an empty variable for the new value to display
    let newValue;

    // If the value the user sees is equal to the max value
    if(userValue == maxValue){
        // then subtract one
        newValue = maxValue - 1;
    }else{
        // else add one
        newValue = actualValue + 1;
    }
    // Display the new value to the user
    span.html(newValue);    

});

Answer 3

在通往自由的道路上，自由生活 jQuery，就是这个答案..

document.querySelectorAll('.likes').forEach(el =>
    el.addEventListener('click', function(){
        let span = this.querySelector('span'),
        now = parseInt(span.innerHTML)

        span.innerHTML = this.dataset.value == now ? ++now : --now
    })
)

<div data-value="3" class="likes">
    <span>3</span>
</div>

如何暂时将 +1 添加到 div 直到它刷新，并在第二次单击时减去 1（等等）？

How to add +1 to a div temporarily until it refreshes, and subtract 1 if clicked a second time (etc etc)?

html

javascript

jquery

add

subtraction