递增和递减 Javascript 不起作用

Question

我做了一个 JavaScript 函数来增加和减少点赞按钮中的数字，这里是函数

var val = 0; 
var negative = false;
$('.i-t').click(function(){
val = val + ((negative) ? -1 : 1); 
negative = (negative) ? false : true;
$("#myval").text(val);
});

此功能在第一次单击时效果很好，但第二次单击它不会删除该值，是该功能有问题吗？这是按钮

 <button id="myvals" class="myvals">
 <i class="myvals" id="i-t"></i> 
 <span class="myvals" id="voteScore">123</span></button>

如果喜欢，我想将 123 更改为 124，如果不喜欢，我想将 122 更改为无效，对不起，我必须从一开始就更好地准备问题

Answer 1

从您的 cmets 和更新中，您要做的是根据您是否已经点击来增加/减少投票数。

在这种情况下，如果需要，您可以使用类来存储状态以支持多个投票按钮，而不是使用变量

$('button.vote').click(function () {
    var $btn = $(this).toggleClass('voted');
    $(this).find("span.score").text(function (i, val) {
        return +val + ($btn.hasClass('voted') ? 1 : -1);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="myvals vote"> <i class="myvals" id="i-t">here</i><span class="myvals score">123</span></button>

Answer 2

您需要两个按钮，一个用于向上，一个用于向下，或者您可以使用一个按钮和一个复选框用于向上或向下，但我认为两个按钮更简单。

从 DOM 元素中读取值时，它们通常是字符串，因此如果需要数字，尤其是加法，请不要忘记在进行算术运算之前将值转换为数字。

所以按钮和代码可以是这样的：

function vote(n) {
  // Get the element to update
  var el = document.getElementById('votes');

  // Convert the text content to Number, then add value
  el.textContent = Number(el.textContent) + n;
}

Votes: <span id="votes">123</span>
<button onclick="vote(1)">up vote</button>
<button onclick="vote(-1)">down vote</button>

当然这只是一个演示，你可以随意调整它。

Answer 3

试试这个：

var val = 0;
var negative = false;
$('.i-t').click(function() {
    val = parseInt($("#voteScore").val()) + ((negative) ? -1 : 1);
    negative = (negative) ? false : true;
    $("#myval").text(val);
});