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

百变鹏仔 2天前 #PHP

文章标签选项

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

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

解决方法：

在 ul 标签上添加一个 id：

<ul id="evaluations">  <li>评价 1</li>  <li>评价 2</li>  <li>评价 3</li>  <li>评价 4</li></ul>

然后，使用 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');    }  });});

文章推荐

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

PHP 函数中如何使用递归来求最小公倍数？

PHP 函数中使用引用的高级技巧和用法

PHP 函数中引用传递与函数调用栈的关系

PHP 函数中引用传递的深浅拷贝问题

PHP 函数中如何使用递归来实现深度优先搜索？