like and dislike button counters using Bootstrap and jQuery

13,881

Try this

$(function () {
     $(".like").click(function () {
         var input = $(this).find('.qty1');
         input.val(parseInt(input.val())+ 1);
     });

     $(".dislike").click(function () {
         var input = $(this).find('.qty2');
         input.val(input.val() - 1);
     });
});
.like,
.dislike {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background: lightgreen;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 4px;
}
.qty1,
.qty2 {
    border: none;
    width:20px;
    background: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> 
    <a class="like"><i class="fa fa-thumbs-o-up"></i>  
        Like <input class="qty1" name="qty1" readonly="readonly" type="text" value="0" />
    </a>
    <a class="dislike"><i class="fa fa-thumbs-o-down"></i> 
        Dislike <input class="qty2"  name="qty2" readonly="readonly" type="text" value="0" />
    </a>
</div>

Share:
13,881
FlyFishingAllDay
Author by

FlyFishingAllDay

Web Developer and Designer from Montana.

Updated on June 04, 2022

Comments

  • FlyFishingAllDay
    FlyFishingAllDay almost 2 years

    http://jsfiddle.net/rL2q4acn/1/ - example of what I am working with, have tried everything that I could think of. Hoping someone can be the extra set eyes I need to finish this. Thank you for your time.

    <div class="container">
        <a class="like">
            <i class="fa fa-thumbs-o-up"></i>  Like
            <input class="qty1" name="qty1" readonly="readonly" type="text" value="0" />
        </a>
        <a class="dislike">
            <i class="fa fa-thumbs-o-down"></i> Dislike 
            <input class="qty2"  name="qty2" readonly="readonly" type="text" value="0" />
        </a>
    </div>
    
    $(function() {
        $(".like").click(function() {
            var input = $(this).siblings('.qty1');
            $('.like').append(input.val()) + 1;
        });
    
        $(".dislike").click(function() {
            var input = $(this).siblings('.qty2');
            $('.dislike').append(input.val()) - 1;
        });
    });