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>
Comments
-
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; }); });