Question

我正在尝试编写投票系统，并且不想重复相同的代码两次，具体取决于用户是按下投票还是拒绝投票。因此我希望运行相同的函数，并使用javascript来确定按下了哪个按钮。但出于某种原因，无论我按哪个按钮，它总是会在投票时添加+1，第一次按下它，第二次按下它只是在控制台中说NaN。这是HTML：

        <li><input type ="button" value="Vote up!" onclick='vote()' id="vote"></li>
        <li><input type ="button" value="Vote Down!" onclick='vote()' id="vote"></li>

这是javascript：

function vote(){
    var votes = document.getElementById('votes').innerHTML;
    var snippetID = document.getElementById('snippetID').innerHTML;

if (document.getElementById('vote').value = 'Vote up!') {
    votes = parseInt(votes + 1);
}
else if (document.getElementById('vote').value = 'Vote down!') {
    votes = parseInt(votes - 1);
};

console.log(votes);

$.ajax({
    type: "POST",
    url: "voteUp",
    data: "votes="+votes+"&snippetID="+snippetID,
    success: function(data) {
        document.getElementById('votes').innerHTML = ''
        document.getElementById('votes').innerHTML = data;
    }
});
}

Answer 1

为按钮分配不同的ID。

<li><input type ="button" value="Vote up!" class="vote" id="vote_up"></li>
<li><input type ="button" value="Vote Down!"class="vote" id="vote_down"></li>

然后你做这样的事情：

$('.vote').click(function() {
    var action = $(this).attr('id');
    if(action === 'vote_up')
    {
        //put vote up logic here
    }
    elseif( action === 'vote_down')
    {
        //put vote down logic here
    }
});

Answer 2

不确定

<强>的Javascript

function vote(x){
    var votes = document.getElementById('votes').innerHTML;
    var snippetID = document.getElementById('snippetID').innerHTML;

if (x = 'Vote up!') {
    votes = parseInt(votes + 1);
}
else if (x = 'Vote down!') {
    votes = parseInt(votes - 1);
};

console.log(votes);

$.ajax({
    type: "POST",
    url: "voteUp",
    data: "votes="+votes+"&snippetID="+snippetID,
    success: function(data) {
        document.getElementById('votes').innerHTML = ''
        document.getElementById('votes').innerHTML = data;
    }
});
}

<强> HTML

Answer 3

除了修复您的id以便它们在页面上是唯一的之外，整个javascript系统都设置为轻松找到引发事件的元素。

有两种方法可以启用此功能。到目前为止，与您的标记最接近的是编辑元素，使其具有以下属性：

onclick="vote(this)"

另一方面，如果您使用的是jQuery，则不包括onclick，并将事件连接起来：

$(document).ready(function () {
    $('li input[type="button"]').each(function() {
        $(this).click(function() {
            var $self = $(this); // Long term, you'll need to recognize that the "this" can be different than the "this" in the line above. In this instance, they are the same element.
            var direction = $self.attr('value');

            if (direction.toUpper() === 'VOTE UP') {
                // Increment vote count.
            }
            else {
                // Decrement vote.
            }
        });
    });
});

Answer 4

根据定义，id必须是唯一的。否则，您可以使用name属性。但是，在您的情况下，您不需要ID或名称。

您可以这样做：

<li><input type ="button" value="Vote up!" onclick='vote(+1)'></li>
<li><input type ="button" value="Vote Down!" onclick='vote(-1)'></li>

然后在你的JS中：

function vote(value) {
    var nodeVotes = document.getElementById('votes');
    var snippetID = document.getElementById('snippetID').innerHTML;

    var votes = +nodeVotes.innerHTML + value;

    console.log(votes);

    $.ajax({
      type: "POST",
      url: "voteUp",
      data: "votes="+votes+"&snippetID="+snippetID,
      success: function(data) {
        nodeVotes.innerHTML = data;
      }
    });
}

请注意，HTML中+中的vote(+1)是多余的，但IMVHO在此上下文中更清晰（阅读代码是＆＃34;投票加一个＆＃34;）。< / p>

javascript如何找到按下的按钮？

4 个答案: