Question

我只是一个关于javascript jQuery的初学者，所以我自己试验它们并从中学习。

所以我有2个<label>用于显示投票，即up votes和down votes。添加或删除投票没有问题，但投票的转换是问题（不是真正的问题）。

html中的投票结构是：

<label id="up_vote"></label>
<label id="down_vote"></label>

从数据库和我的用户innerHTML检索值，以在<label>标记之间插入数据。用户点击<label>后，up_vote或down_vote，更新请求将通过ajax发送并更新投票计数，一旦成功执行，内部的值<label>将增加1，并且删除投票，它将递减。一旦用户投票，将添加voted类。

我的javascript看起来像这样：

$("#up_vote, #down_vote").click(function(e) {
  var voteCount = document.getElementById(e.target.id).innerHTML;
  var action;
  var value;

  if ($("#up_vote").hasClass("voted") || $("#down_vote").hasClass("voted")) {
    if ($(this).hasClass("voted")) {
      action = "remove_vote";
      setValue();
    } else {
      action = "switch_vote";
      setValue();
    }
  } else {
    action = "add_vote";
    setValue();
  }

  function setValue() {
    if (e.target.id === "up_vote") {
      value = 1;
    } else if (e.target.id === "down_vote") {
      value = -1;
    }
  }

  $.ajax({
    method: "GET",
    url: "votes.php",
    data: , //it includes the user session id, the post id, and the action and values for doing the specific functions (i just didn't put it here, just giving the logic on what does my code looks like
    cache: false,
    success: function(msg) {
      if (msg === "vote_added") {
        document.getElementById.innerHTML = parseInt(voteCount) + 1;
        $("#" + e.target.id).addClass("voted");
      } else if (msg === "vote_removed") {
        // the same function of the vote_added message, but instead, it decrements the value and removes the "voted" class
      } else if (msg === "vote_switched") {
        // these is the part that i want to achieve, but coding it seems a bit long (just my thought)
      } else if (msg === "vote_exist") {
        // these is a, some sort of notifying the user that the he/she already votes the specific post
      }
    }
  })
})

正如您在javascipt上看到的那样，它会发送一个action和value（指定它是up vote还是down vote，这将用于在php中执行特定的功能。然后它会回显出成功执行查询后将使用的消息。

（在最后一个条件下，vote_exist用于安全检查。当我正在测试某些内容时，在Inspector窗口中删除class="voted"（通知用户已经投票），点击这些后面会再次增加投票次数，这会删除限制，所以我在用户投票进行双倍安全检查之前在php中添加了验证功能。希望这些可以帮助其他人。）

我关注的是第三个条件，即投票的转换。例如，用户已经投票，然后他/她想要投票。查询没有问题，仅适用于javascript部分。我有一个想法，通过在vote_added和vote_removed中使用相同的函数，其中，当单击时，目标id将在另一个将递减的同时递增，还添加了voted类到目标ID并删除另一个。

我怎样才能以更短的方式完成这些工作？

（对不起，很长的帖子，只是试着解释代码的作用。）

jQuery优化投票切换

0 个答案: