我的网站上有一个类似的功能。更新新号码大约需要 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***点击***x(假装我点击了大拇指(
<div class="likediv">4</div> <!-- updated number -->
x***点击***x(假装我再次点击了大拇指(
<div class="likediv">3</div> <!-- updated number -->
x***点击***x(假装我再次点击了大拇指(
<div class="likediv">4</div> <!-- updated number -->
x***点击***x(假装我再次点击了大拇指(
<div class="likediv">3</div> <!-- updated number -->
x***点击***x(假装我再次点击了大拇指(
<div class="likediv">4</div> <!-- updated number -->
我想你明白了。
那么我该怎么做呢？请参阅上面的启动器代码，我想我已经很接近了。
哦，是的，还有一件事。页面上有许多类似的按钮，而不仅仅是一个。所以它需要存储和记住任何div。因为我们喜欢评论，而且每页有很多评论。
为此，请只需要使用jquery。
编辑：更新：
所以，它不起作用，@VIDesign的回答，但我明白为什么。事实上，这是HTML的实际外观。(请注意，我也包括新的工作data-value作为@VIDesign回答的一部分(
<div class="likediv">
<span class="dynamic-span" data-value="3">3</span>
</div>
好的，显然为什么它不起作用是因为当您单击时，您实际上单击了.likediv，但是data-value="3"必须进入嵌套在div内部并且无法触摸的跨度内。
那么，我们如何触发@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 中的任何内容。
此外，根据设计，此处所做的任何操作都应在页面重新加载时丢失。它只是一个前端显示黑客，而不是后端任何代码的实际更新。
小提琴https://jsfiddle.net/videsignz/n3e5u7bt/34/下面是使用 data 属性的示例。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>
然后像这样处理按钮/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);
});
我的答案是在作用域中创建一个全局变量dec，告诉您是递增还是递减
var dec = false;
$("#myButton").click(function(){
dec = !dec;
});
if(!dec)
$(".likenum").val(parseInt($(".likenum").val()) + 1);
else
$(".likenum").val(parseInt($(".likenum").val()) - 1);
在通往自由的道路上，没有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>