Javascript 简单心形点击计数器

我正在尝试制作一个心形的点击计数器，只允许点击一次，它会在以1280开头的数字上加1。心脏形状开始时没有颜色，但单击后将切换为红色心脏。这是我试过的一句话，但当我点击心脏时，这个数字并没有增加（：（

有人能看一下代码，说哪部分错了吗

$（'body'）。在（'click'，'上。共享图标a.heart24'，函数（事件）{
事件预防；
console.log（'heart'）；
函数日志（id、位置、ac类型、t、pp、当前对象）{
//如果（t=='t'）返回；
if（$（当前对象）.hasClass（'heart24-on'））{
返回；
}
var-heartLink=$（'.wrap块[data id=“'+id+'”]a.heart24'）；
$（heartLink）.removeClass（'heart24-off'）.addClass（'heart24-on'）；
html（+heartLink.html（）+1）；

.heart24打开{
背景：url（//www.azquotes.com/public2/images/heart24 on.png）不重复！重要；
背景尺寸：24px自动！重要；
边界半径：0；
}
.24A{
字号：500；
颜色：#a94c1c；
}
.heart24{文本装饰：无}
.heart24{位置：相对；顶部：0！重要；显示：内联块；右边距：4px；宽度：24px；高度：24px；边框半径：50%}
.heart24 a{字体大小：500；颜色：#a94c1c}
.heart24在{background:url（//www.azquotes.com/public2/images/heart24 on.png）上不重复！重要；背景大小：24px auto！重要；边框半径：0}
.heart24 off{background:url（//www.azquotes.com/public2/images/heart24 off.png）不重复！重要；背景大小：24px auto！重要；边框半径：0}
.heart24{垂直对齐：顶部；背景位置-x:0；左侧填充：31px；顶部填充：2px；底部填充：0；线条高度：20px；字体大小：12px}

---

请查看我的答案：

$(function(){

            $(document).on('click', '.heart24', function(event){

                    event.preventDefault();


                    var heartCount = +$(this).text();
                    if(heartCount == 1280){
                        heartCount++;
                        $(this).removeClass('heart24-off');
                        $(this).addClass('heart24-on');
                        $(this).text(heartCount);
                    }
                    else{
                        heartCount--;
                        $(this).removeClass('heart24-on');
                        $(this).addClass('heart24-off');
                        $(this).text(heartCount);
                    }



            })

        });

---

您的JS不完整、语法无效且存在部分缺陷。此外，html片段与您在代码中使用的选择器不匹配

下面的代码片段可能满足您的需要。您可能需要根据目标站点中的上下文进一步约束

a.heart

元素的选择器

$（'body'）。在（'click'，'a.heart24'，函数（事件）{
event.preventDefault（）；
console.log（'heart'）；
//***函数日志（id、位置、ac类型、t、pp、当前对象）{
//如果（t=='t'）返回；
if（$（event.target）.hasClass（'heart24-on'））{
返回；
}
var-heartLink=$（'a.heart24'）；
$（heartLink）.removeClass（'heart24-off'）.addClass（'heart24-on'）；
$（heartLink.text（+heartLink.text（）+1）；
})；

.heart24打开{
背景：url（//www.azquotes.com/public2/images/heart24 on.png）不重复！重要；
背景尺寸：24px自动！重要；
边界半径：0；
}
.24A{
字号：500；
颜色：#a94c1c；
}
.heart24{文本装饰：无}
.heart24{位置：相对；顶部：0！重要；显示：内联块；右边距：4px；宽度：24px；高度：24px；边框半径：50%}
.heart24 a{字体大小：500；颜色：#a94c1c}
.heart24在{background:url（//www.azquotes.com/public2/images/heart24 on.png）上不重复！重要；背景大小：24px auto！重要；边框半径：0}
.heart24 off{background:url（//www.azquotes.com/public2/images/heart24 off.png）不重复！重要；背景大小：24px auto！重要；边框半径：0}
.heart24{垂直对齐：顶部；背景位置-x:0；左侧填充：31px；顶部填充：2px；底部填充：0；线条高度：20px；字体大小：12px}

---

考虑只启用

.toggleClass（）

选项。示例代码：

$（函数（）{
功能切换心脏（ev）{
ev.preventDefault（）；
var self=$（ev.目标）；
var count=parseInt（self.text（））；
if（self.hasClass（“heart24 on”））{
返回false；
}
self.toggleClass（“heart24关闭heart24打开”）；
html（++count）；
}
$（“.heart24”）。单击（切换心脏）；
})；

.heart24{
字号：500；
颜色：#a94c1c；
文字装饰：无；
位置：相对位置；
顶部：0！重要；
显示：内联块；
保证金权利：4px；
宽度：24px；
高度：24px；
边框半径：50%字体重量：500；
颜色：#a94c1c垂直对齐：顶部；
背景位置：0；
左侧填充：31px；
垫顶：2件；
填充底部：0；
线高：20px；
字号：12px
}
.heart24 on{
背景：url（//www.azquotes.com/public2/images/heart24 on.png）不重复！重要；
背景尺寸：24px自动！重要；
边界半径：0
}
.打气{
背景：url（//www.azquotes.com/public2/images/heart24 off.png）不重复！重要；
背景尺寸：24px自动！重要；
边界半径：0
}

请查看我的答案。如果对您有效，请勾选绿色勾选答案。感谢您的帮助Elman。我刚刚勾选：）感谢您的帮助，特别是在清理我的CSS时。欢迎。没有任何“错误”使用CSS，但如果您有重复，您可能会提前进行更改，然后在您不知道的情况下在CSS中进行更改。请记住选择一个答案并将其标记为所选答案。非常感谢您的评论和帮助。是的，我的代码非常糟糕……我刚刚开始学习JS。这非常困难：（我可以问一下，你为什么要添加你正在使用需要包含的jQuery库。非常感谢你的帮助。你的答案是最好的（对我来说），因为当我单击时，它增加了1，但当我再次单击时，它减少了1。）