Let's see the example for the like button using jquery. Nowadays we are using this type of function in all the websites.Having a simple jquery function we can design the like button for a image or form.

Like Button using jQuery

Image

Like (0)

Index :

<div class="container">
            <h1>Like Button using jQuery</h1>
            
            <div id="item1" class="well">
                <h2>Image</h2>
                <p><img src="Penguins.jpg" width="500" height="300"></p>
                <p><a href="">Like</a> (<span>0</span>)</p>
            </div>
    
        </div>

Style :

<style type="text/css">

.container
{
    width:550px;margin-left:auto;margin-right:auto;zoom:1;
}
a
{
    color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;
}
a:hover
{
    color:#00438a;text-decoration:underline;
}
p
{
    font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;
}
h1
{
     font-weight:bold;color:#ffffff; text-align:center;}h2{font-weight:bold;color:#404040;
}
.well
{
    background-color:#f5f5f5;margin-bottom:20px;padding:19px;min-height:20px;border:1px solid #eee;border:1px solid rgba(0, 0, 0, 0.05);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
        </style>

Script :

<script>
        $( function() {
            $( "a" ).click( function( e ) {
                var thisrecord = $( this ).closest( "div" );
                var likes = parseInt( thisrecord.find( "span" ).html() ) + 1;
                thisrecord.find( "span" ).html( likes );
                var previousrecord = "";
                var prevrecordlikes = "";
                do
                {
                    prevrecord = thisrecord.prev( "div" );
                    prevrecordlikes = parseInt( prevrecord.find( "span" ).html() );
                    if ( likes <= prevrecordlikes ) break;
                    thisrecord.after( prevrecord );
                }
                while ( likes >= prevrecordlikes );
                e.preventDefault();
            }); 
        });        
        </script>