Простой счетчик кликов в форме сердца - PullRequest
Новая
       3

Простой счетчик кликов в форме сердца

1 голос
/ 06 апреля 2020

Я пытаюсь создать счетчик кликов в форме сердца, разрешен только один клик, и это добавит 1 к числу, начинающемуся с 1280. Форма сердца начинается без цвета, но при щелчке оно переключится на красное сердце , Вот цитата, которую я попробовал, но число не увеличивается, когда я нажимаю на сердце. :( :(

Может кто-нибудь посмотреть код и сказать, какая часть неправильная? 

$('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>

Ответы [ 3 ]

1 голос
/ 06 апреля 2020

Проверьте мой ответ, пожалуйста: 

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



            })

        });
0 голосов
/ 06 апреля 2020

Рассмотрим просто вариант .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>
0 голосов
/ 06 апреля 2020

Ваш 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>
...