javascript - 释放 handle 后是否可以阻止使用 slider

Question

我正在尝试在我的站点中实现一个 slider ，用户可以在其中给出评分。我想在他们释放句柄后将该评分插入我的数据库，这样他们只能评分一次。有谁知道这是怎么可能的。我做了一些研究，但我似乎没有找到任何东西。欢迎提供任何帮助以及提供更多相关信息的网站。

Answer 1

您最初会将 slider 设置为它的 input 和 change 事件，然后，在 change 事件处理程序中，您将断开input 处理程序(因为如果不再处理更多输入，则值无法更改)。进入数据库的实际值将来自输出占位符。

您甚至可以添加一点 CSS 过渡以在评级锁定后删除 slider 。

配置 UI 后，您需要一种方法来防止用户重新加载页面并再次投票，这可以通过多种方式完成，但我建议使用一种简单(但并非万无一失)的方法，使用 本地存储。您可以在 localStorage 中设置一个“标志”，指示已投票，并且当页面最初加载时，您将检查 localStorage 以查看该标志是否已被投票先前设定。

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

这是一个例子:

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; }

<input type="range" id="rating" min="0" max="10">
<span id="output"></span>