简单的心形点击计数器答案

【问题标题】：Simple heart-shaped click counter简单的心形点击计数器
【发布时间】：2020-04-05 23:04:54
【问题描述】：

我正在尝试制作一个心形点击计数器，只允许单击一次，它会在以 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}

&lt;a class="heart24 heart24-off" href="javascript:void(0);"&gt;1280&lt;/a&gt;

【问题讨论】：

请查看我的答案。
如果对您有用，请勾选绿色选中答案。
感谢您的帮助埃尔曼。我刚刚打勾:)

标签： javascript jquery counter

【解决方案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);
                    }



            })

        });

【讨论】：

非常感谢您的帮助。你的答案是最好的（对我来说），因为当我点击时，它会增加 1，但是当我再次点击时，它会降低 1

【解决方案2】：

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

下面的 sn-p 可能做你想做的事。您可能需要根据目标站点中的上下文进一步限制 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>

【讨论】：

非常感谢您的评论和帮助。是的，我的代码很糟糕......我才刚刚开始学习 JS.. 很难:(
请问，为什么要在html代码中加上吧？
您正在使用需要包含的 jQuery 库。

【解决方案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>

【讨论】：

感谢您的帮助，尤其是在清理我的 CSS 方面。
@sunflowerhk 欢迎。 CSS 没有任何“错误”，但是如果您有重复，您可能会提前进行更改，然后在您不知情的情况下稍后在 CSS 中更改回来。请记住选择其中一个答案并将其标记为选定答案。