Question

我试图在我的网站中实现一个滑块，用户可以在其中给出评级。我想在释放句柄后在我的数据库中插入该评级，这样他们只能评分一次。有谁知道这是可能的。我做了一些研究，但我似乎找不到任何东西。欢迎任何帮助以及有关此信息的网站。

Answer 1

为用户投票时“评分”设置为“true”的访问者设置Cookie。保存投票前检查cookie。这可能是您最简单的方法，但有些情况仍会让用户多次投票。它们包括：

跳转到其他浏览器/隐身会话的用户
从多个设备访问该网站的用户，例如移动，桌面
清除或阻止Cookie的用户将无法控制

总的来说，没有防止多重评级的万无一失的方法。最接近的可能是强迫用户在投票前登录，因此您知道他们是谁并且可以控制他们的行为。

Answer 2

您最初会将滑块设置为input和change个事件，然后在change事件处理程序中断开input处理程序（因为如果没有更多的输入被处理，值不能改变）。数据库中的实际值将来自输出占位符。

在锁定评级后，您甚至可以添加一点CSS过渡来移除滑块。

配置完UI之后，你需要一种方法来阻止用户重新加载页面并再次投票，这可以通过多种方式完成，但我会建议一种简单（但不是万无一失）的方式，使用{ {1}}。您可以在localStorgage中设置一个“标志”，表示投票已被投票，并且在页面最初加载时，您将检查localStorage以查看该标志是否先前已设置。

注意：localStorage在Stack Overflow Code Snippet环境中不起作用，但您可以看到它在 this Fiddle 下工作。

以下是一个例子：

localStorage

let out = document.getElementById("output");
let slider = document.getElementById("rating"); 

// Check to see if the user has already voted
if(localStorage.getItem("vote") === "true"){
  // User has voted
  out.textContent = "Your vote has already been cast.";
  slider.classList.add("hidden"); // Hide the slider
} else {
  // User has not voted

  // Set up event listener that records value
  slider.addEventListener("input", rate);

  // Set up event listener that disconnects first event listener
  slider.addEventListener("change", disconnect);
}

function rate(){
  out.textContent = this.value;
}

function disconnect(){
  this.removeEventListener("input", rate);  // Disconnect the input event handler
  this.classList.add("hidden");  // Hide the slider at this point
  
  // Update your database with the rating stored in the output
  console.log("Your rating of: " + out.textContent + " has been recorded!");
  
  // Set the "flag" 
  localStorage.setItem("vote", "true");
}

#rating { opacity:1; transition:all 1s; width:15em; }
#rating.hidden { opacity:0; width:0; }

是否可以在释放句柄后阻止滑块被使用

2 个答案: