单击“喜欢”按钮时计数器增加

Question

我正在网站的图库页面上工作，我需要实现一个带有计数器的“喜欢”按钮。

我能够从codepen.io（https://codepen.io/anon/pen/OKLZgX#anon-login）中获得一个不错的选择，但是我需要一个javascript函数来增加计数器。

pip install feature-engine

/* 
 * Love button for Design it & Code it
 * http://designitcodeit.com/i/9
 */
$('.btn-counter').on('click', function(event, count) {
  event.preventDefault();

  var $this = $(this),
    count = $this.attr('data-count'),
    active = $this.hasClass('active'),
    multiple = $this.hasClass('multiple-count');


  // First method, allows to add custom function
  // Use when you want to do an ajax request
  /* if (multiple) {
  $this.attr('data-count', ++count);
  // Your code here
  } else {
  $this.attr('data-count', active ? --count : ++count).toggleClass('active');
  // Your code here
  } */

  // Second method, use when ... I dunno when but it looks cool and that's why it is here
  $.fn.noop = $.noop;
  $this.attr('data-count', !active || multiple ? ++count : --count)[multiple ? 'noop' : 'toggleClass']('active');

});

html {
  background: #f5f5f5;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

body {
  margin: 30px auto 0 auto;
  width: 450px;
  font-size: 75%;
}

h3 {
  margin-top: 30px;
  font-size: 18px;
  color: #555;
}

p {
  padding-left: 10px;
}


/*
     * Basic button style
     */

.btn {
  box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5) inset;
  border-radius: 3px;
  border: 1px solid;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  padding: 0 8px;
  position: relative;
  font-size: 12px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}


/*
     * Counter button style
     */

.btn-counter {
  margin-right: 39px;
}

.btn-counter:after,
.btn-counter:hover:after {
  text-shadow: none;
}

.btn-counter:after {
  border-radius: 3px;
  border: 1px solid #d3d3d3;
  background-color: #eee;
  padding: 0 8px;
  color: #777;
  content: attr(data-count);
  left: 100%;
  margin-left: 8px;
  margin-right: -13px;
  position: absolute;
  top: -1px;
}

.btn-counter:before {
  transform: rotate(45deg);
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
  background-color: #eee;
  border: 1px solid #d3d3d3;
  border-right: 0;
  border-top: 0;
  content: '';
  position: absolute;
  right: -13px;
  top: 5px;
  height: 6px;
  width: 6px;
  z-index: 1;
  zoom: 1;
}


/*
     * Custom styles
     */

.btn {
  background-color: #dbdbdb;
  border-color: #bbb;
  color: #666;
}

.btn:hover,
.btn.active {
  text-shadow: 0 1px 0 #b12f27;
  background-color: #f64136;
  border-color: #b12f27;
}

.btn:active {
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.2) inset;
}

.btn span {
  color: #f64136;
}

.btn:hover,
.btn:hover span,
.btn.active,
.btn.active span {
  color: #eeeeee;
}

.btn:active span {
  color: #b12f27;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}