我正在尝试制作一个心形点击计数器，只允许点击一次，它会在1280开头的数字上加1。心形一开始没有颜色，但单击后会切换到红色心形。这是我试过的一句话，但当我点击心脏时，数字不会增加。：(：(
有人能看一下代码，说出哪一部分错了吗？
$('body').on('click', '.share-icons a.heart24', function(event){
event.defaultPrevented;
console.log('heart');
function log_quote_heart(id, place, ac_type, t, pp, current_object){
// if(t === 't') return;
if($(current_object).hasClass('heart24-on')){
return;
}
var heartLink = $('.wrap-block[data-id="'+id+'"] a.heart24');
$(heartLink).removeClass('heart24-off').addClass('heart24-on');
heartLink.html(+heartLink.html()+1);.heart24-on {
background: url(//www.azquotes.com/public2/images/heart24-on.png) no-repeat!important;
background-size: 24px auto!important;
border-radius: 0;
}
.heart24 a {
font-weight: 500;
color: #a94c1c;
}
.heart24 {text-decoration:none}
.heart24 {position:relative;top:0!important;display:inline-block;margin-right:4px;width:24px;height:24px;border-radius:50%}
.heart24 a{font-weight:500;color:#a94c1c}
.heart24-on{background:url(//www.azquotes.com/public2/images/heart24-on.png) no-repeat!important;background-size:24px auto!important;border-radius:0}
.heart24-off{background:url(//www.azquotes.com/public2/images/heart24-off.png) no-repeat!important;background-size:24px auto!important;border-radius:0}
.heart24{vertical-align:top;background-position-x:0;padding-left:31px;padding-top:2px;padding-bottom:0;line-height:20px;font-size:12px}<a class="heart24 heart24-off" href="javascript:void(0);">1280</a>请查看我的答案：
$(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').on('click', 'a.heart24', function(event) {
event.preventDefault();
console.log('heart');
//*** function log_quote_heart(id, place, ac_type, t, pp, current_object) {
// if(t === 't') return;
if ($(event.target).hasClass('heart24-on')) {
return;
}
var heartLink = $('a.heart24');
$(heartLink).removeClass('heart24-off').addClass('heart24-on');
$(heartLink).text(+heartLink.text()+1);
});.heart24-on {
background: url(//www.azquotes.com/public2/images/heart24-on.png) no-repeat!important;
background-size: 24px auto!important;
border-radius: 0;
}
.heart24 a {
font-weight: 500;
color: #a94c1c;
}
.heart24 {text-decoration:none}
.heart24 {position:relative;top:0!important;display:inline-block;margin-right:4px;width:24px;height:24px;border-radius:50%}
.heart24 a{font-weight:500;color:#a94c1c}
.heart24-on{background:url(//www.azquotes.com/public2/images/heart24-on.png) no-repeat!important;background-size:24px auto!important;border-radius:0}
.heart24-off{background:url(//www.azquotes.com/public2/images/heart24-off.png) no-repeat!important;background-size:24px auto!important;border-radius:0}
.heart24{vertical-align:top;background-position-x:0;padding-left:31px;padding-top:2px;padding-bottom:0;line-height:20px;font-size:12px}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<a class="heart24 heart24-off" href="javascript:void(0);">1280</a>
</body>考虑只使用.toggleClass()选项。示例代码：
$(function() {
function toggleHeart(ev) {
ev.preventDefault();
var self = $(ev.target);
var count = parseInt(self.text());
if (self.hasClass("heart24-on")) {
return false;
}
self.toggleClass("heart24-off heart24-on");
self.html(++count);
}
$(".heart24").click(toggleHeart);
});.heart24 {
font-weight: 500;
color: #a94c1c;
text-decoration: none;
position: relative;
top: 0!important;
display: inline-block;
margin-right: 4px;
width: 24px;
height: 24px;
border-radius: 50% font-weight: 500;
color: #a94c1c vertical-align: top;
background-position: 0;
padding-left: 31px;
padding-top: 2px;
padding-bottom: 0;
line-height: 20px;
font-size: 12px
}
.heart24-on {
background: url(//www.azquotes.com/public2/images/heart24-on.png) no-repeat!important;
background-size: 24px auto!important;
border-radius: 0
}
.heart24-off {
background: url(//www.azquotes.com/public2/images/heart24-off.png) no-repeat!important;
background-size: 24px auto!important;
border-radius: 0
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="heart24 heart24-off" href="#">1280</a>