如何只允许用户单击一次评价选项，并阻止其他选项被点击？

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《如何只允许用户单击一次评价选项，并阻止其他选项被点击？》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

如何实现点击一个元素后，其他同类元素无法再次点击？

有四个评价选项，当用户单击其中一个评价并添加“on”类后，其他评价选项应该变为不可点击，并提示用户已经评价。

解决方法：

在 ul 标签上添加一个 id：

  
评价 1
  
评价 2
  
评价 3
  
评价 4

然后，使用 javascript 遍历 li 标签，并在单击事件中检查是否存在具有“on”类的 li：

const evaluations = document.getElementById('evaluations');

evaluations.addEventListener('click', (event) => {
  const currentLi = event.target;
  
  // 检查是否存在具有 "on" 类的 li
  const onLi = Array.from(evaluations.children).find((li) => li.classList.contains('on'));
  
  // 如果存在，提示用户已评价
  if (onLi) {
    alert('您已评价！');
    return;
  }
  
  // 否则，添加 "on" 类并禁用其他 li
  currentLi.classList.add('on');
  Array.from(evaluations.children).forEach((li) => {
    if (li !== currentLi) {
      li.classList.add('disabled');
    }
  });
});

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。