喜歡並且不喜歡使用Bootstrap和jQuery的按鈕計數器

Question

http://jsfiddle.net/rL2q4acn/1/ - 我正在使用的示例，嘗試了我所能想到的一切。希望有人能成爲我需要完成的額外目光。感謝您的時間。

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

Answer 1

試試這個

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