增加和减少onclick像facebook一样按钮

时间:2017-06-30 05:40:43

标签: jquery

我想知道如何创建一个类似按钮,其中计数会在第一次点击时增加,然后使用jquery减少下一次点击。

1 个答案:

答案 0 :(得分:0)

您可以尝试使用此代码。这并没有保存"喜欢"。为此,您必须使用PHP和数据库之类的后端语言来存储信息。



$(document).ready(function () {
  $('a.button').click(function () {
  if ($(this).hasClass('clicked')) {
    $(this).removeClass('clicked');
    $(this).find('span.number').html(parseInt($(this).find('span.number').html()) - 1);
    $(this).find('span.label').html('Like');
  }
  else {
    $(this).addClass("clicked");$(this).find('span.number').html(parseInt($(this).find('span.number').html()) + 1);
    $(this).find('span.label').html('Dislike');
  }
});
});

a.button {
  display: inline-block;
  background-color: #8b9dc3;
  padding: 4px 8px 4px 8px;
  border-radius: 3px;
  color: #3b5998;
  font-family: Arial;
  cursor: pointer;
  user-select: none;
}
a.button:hover {
  box-shadow: 0px 0px 3px grey;
}
a.button span.number {
  display: inline-block;
  margin-right: 5px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="button"><span class="number">0</span><span class="label">Like</span></a>
&#13;
&#13;
&#13;