无法获得投票系统的div值

Question

当我点击#upvote时，#vote增加1，点击#downvote时减少1.但是当投票值为＆＃34; -1＆＃34;如果点击了upvote，则投票值变为＆＃34; 1＆＃34;而不是＆＃34; 0＆＃34;。

<script type="application/javascript">
$(document).ready(function (){

    $('#upvote').click(function() {
        var VoteValue = $('#vote').val();
        $('#vote').text(VoteValue+1);

    });

$('#downvote').click(function() {
        var VoteValue1 = $('#vote').val();
        $('#vote').text(VoteValue1-1);

    });

});
</script>


<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>

任何可能出错的想法。

Answer 1

尝试parseInt()

$(document).ready(function (){

    $('#upvote').click(function() {
        var VoteValue = $('#vote').text();
        $('#vote').text(parseInt(VoteValue)+1);

    });

$('#downvote').click(function() {
        var VoteValue1 = $('#vote').text();
        $('#vote').text(parseInt(VoteValue1)-1);

    });

});

Working DEMO

注意： .text()应该用于获取DIV的值而不是val()

Answer 2

首先，您应该使用html（）或text（）而不是val（），val（）用于输入或textarea。

然后，你应该使用parseInt，以确保你操纵正确的类型：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

如果这还没有解决，那么创建一个jsfiddle，以便我们可以重现问题。

最后，如果您在同一页面上有多个投票系统，请注意重复的ID。

Answer 3

使用.text()代替.val()，并使用+将字符串解析为数字。

$(document).ready(function (){

    $('#upvote').click(function() {
        var VoteValue = +$('#vote').text();
        $('#vote').text(VoteValue+1);

    });

    $('#downvote').click(function() {
        var VoteValue1 = +$('#vote').text();
        $('#vote').text(VoteValue1-1);

    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="upvote" style="font-size:22px;">+</div>
<div id="vote" style="font-size:22px;">0</div>
<div id="downvote" style="font-size:22px;">-</div>

Answer 4

Solution

首先，$('#vote').val()应为$('#vote').text()。现在这些值将为string类型。 首先将它们解析为int 以正确处理它们。因为那样它只会附加数字而不是递增或递减。

$(document).ready(function () {

  $('#upvote').click(function () {
    var VoteValue = parseInt($('#vote').text());
    $('#vote').text(VoteValue + 1);

  });

  $('#downvote').click(function () {
    var VoteValue1 = parseInt($('#vote').text());
    $('#vote').text(VoteValue1 - 1);

   });

});

Answer 5

在HTML文档中，.html（）可用于获取任何元素的内容。 .val（）用于输入框。 http://api.jquery.com/html/

var VoteValue1 = $('#vote').html();
OR
var VoteValue1 = $('#vote').text();