简单的心形点击计数器

Question

我想做一个心形的点击计数器，只允许点击一次，它会给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>

Answer 1

请查看我的回答：

$(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);
                    }



            })

        });

Answer 2

您的 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>

Answer 3

考虑只使用 .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>

简单的心形点击计数器

Simple heart-shaped click counter

javascript

jquery

counter