Increase and decrease onclick like facebook like button

by

You can try this code. This does not save the “likes”. To have that you have to use some backend langauge like PHP and a database to store the information in.

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

More Related Contents:

  1. Find a string of text in an element and wrap some span tags round it
  2. jQuery click events not working in iOS [duplicate]
  3. Selecting HTML comments with jQuery
  4. How do I use jQuery for click event in iPhone web application
  5. How to get screen width without (minus) scrollbar?
  6. Get clicked element using jQuery on event?
  7. Cannot modify content of iframe, what is wrong?
  8. How do I change the background image using jQuery animation?
  9. jQuery: Check if image exists
  10. jQuery override default validation error message display (Css) Popup/Tooltip like
  11. How do I select elements on multiple attribute values
  12. jQuery attribute selector for multiple values
  13. How can I execute multiple, simultaneous jquery effects?
  14. How can I disable a button on a jQuery UI dialog?
  15. Detect page change on DataTable
  16. Fancybox: iframe doesn’t work
  17. Using jquery to make a POST, how to properly supply ‘data’ parameter?
  18. Twitter Bootstrap add active class to li
  19. Animate an element’s width from 0 to 100%, with it and it’s wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery
  20. Detect change to selected date with bootstrap-datepicker
  21. Use jQuery to convert JSON array to HTML bulleted list
  22. How to get form html() via jQuery including updated value attributes?
  23. How to set minDate to current date in jQuery UI Datepicker?
  24. e.preventdefault(); not working
  25. jquery nested ajax calls formatting
  26. Selectable optgroup using select2
  27. jquery click doesn’t work on hyperlink
  28. Disable Back Button in Browser using jquery?
  29. change the href of a css link via jquery
  30. Jquery .on(‘scroll’) not firing the event while scrolling

Leave a Comment